javascript - 圆形按钮 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 来制作按钮效果。

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

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

button.addEventListener('mouseout',function(){
	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>