javascript - JQuery 弹跳跳出格格不入？

Question

我正在尝试在鼠标悬停时使用 css“left”定位的按钮上使用 jQuery UI 反弹效果。它似乎有效，但是如果您将鼠标在它上面来回移动几次，它就会移出位置并粘在左边。我不确定它为什么这样做。这是我的代码：http: //jsbin.com/afoyiz/1/edit

Answer 1

问题是你的css定义

left: 20%

似乎被覆盖了。可能是由于bounce发出left: 0然后没有正确缓存left. 随之而来的是left: 0被缓存为正确的值，并且当一切都说完后，元素被射向左侧。

我的建议是锁定此功能。这将防止错误，也将防止按钮的游戏。

$(document).ready(function() {
  var lockMouseover;
  $("#button").mouseover(function(){
    if( typeof lockMouseover == "undefined" ){
     $("#button").effect( "bounce", {times:3}, 300 );
      lockMouseover = setTimeout( function(){ var un; lockMouseover = un;}, 950 );
    }
  });

});

我在您的 jsbin 上对此进行了测试，并且有效。