Круглая кнопка CSS загрузка анимации

Question

Я пытаюсь создать сайт для использования моего Kinect. Моя рука - мышь, поэтому я создал индикатор, когда активирована кнопка.

Первое, о чем я думал, это круглая кнопка с белой рамкой 2px с использованием эффекта зависания. При наведении курсора на кнопку в течение 2 секунд граница или линия внутри границы должны измениться на другой цвет, например синий, чтобы указать ход прохождения/время.

После 2 секунд наведения курсора на кнопку он должен получить событие щелчка, например, для перехода на другую страницу.

Когда я открываю кнопку, процесс загрузки должен медленно идти назад.

Мой код: http://jsfiddle.net/nick_craver/9pzVQ/1/

<a href="#" class="menu-arrow" onclick="showMenu('mnu_searches', event, 0, this)">Hover me!</a> 

<script> 
    $(function() { 
     $("a.menu-arrow").hover(function() { 
     $.data(this, "timer", setTimeout($.proxy(function() { 
      $(this).click(); 
     }, this), 2000)); 
     }, function() { 
     clearTimeout($.data(this, "timer")); 
     }); 
    }); 

    function showMenu() { 
     alert("showMenu function fired"); 
    } 
</script> 

Диаграмма: http://imgur.com/RdYotvd

Answer 1

Я надеюсь, что я вас понял правильно. Я использовал чистый javascript и немного css для создания эффектов кнопки hoovering.

var button = document.getElementById('button'); 
 
var timer; 
 

 
button.addEventListener('mouseover',function(){ 
 
\t timer = setTimeout(function(){ 
 
    \t alert('load new website now!'); 
 
    },2000); 
 
}); 
 

 
button.addEventListener('mouseout',function(){ 
 
\t clearTimeout(timer); 
 
    //location.replace("http://imgur.com/RdYotvd"); 
 
})

.menu-arrow{ 
 
    display:inline-block; 
 
    margin:10px; 
 
    border: solid 4px white; 
 
    border-radius:5px; 
 
    background-color:white; 
 
    padding:5px; 
 
    transition: border-color 2s ease-in-out; 
 
} 
 

 
.menu-arrow:hover{ 
 
    border-color:#33aaff; 
 
}

<a href="#" id="button" class="menu-arrow" onclick="showMenu('mnu_searches', event, 0, this)">Hover me!</a>