ラウンドボタン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とhusveringボタンエフェクトのためのCSSを少し使用しました。私はこの例では、より願って https://youtu.be/_MTLU5Qddqs?t=41s ：

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>