0

我想向我的轮播添加按钮，当用户将鼠标悬停在轮播上时会显示这些按钮，并在他们离开该元素时隐藏它们。

我已经这样做了，但是当我快速进入并离开悬停的元素时，一旦我停止，动画（不透明度 0-1）就会重复发生。

这是一个要演示的小提琴。你必须快速进入和离开结果框才能看到我的意思（黑色闪光的东西代表我的按钮）

http://jsfiddle.net/BrshS/

transitions the opacity on hover, but repeats it a lot when hovered many times

有人知道我怎么能阻止这种情况发生吗？非常感谢，花了几个小时（即几乎一整天：/）

4

3 回答 3

2

更新了您的示例以使用 CSS3 动画，因为这是当今的方式。无需 javascript，更好的性能和免费的优雅降级！

.next,
.prev {
    opacity: 0;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.image_carousel:hover .next,
.image_carousel:hover .prev {
    opacity: 1;
}
于 2013-10-22T22:03:28.333 回答
1

您可以简单地使用.fadeTo()代替动画的方法，以及.stop()中断当前动画。

  var $buttons = $('#next, #prev').hide();

  $('.image_carousel').hover(function() {
    $buttons.stop().fadeTo(300,1);
  },
  function(){
    $buttons.stop().fadeTo(300,0);
  });

演示：http: //jsfiddle.net/BrshS/2/

于 2013-10-22T21:57:44.677 回答
0

您可以使用该方法 “停止”它，stop

x.stop(true,true).animate(

http://jsfiddle.net/Tentonaxe/BrshS/4/

或者甚至是finish方法。

x.finish().animate(

http://jsfiddle.net/Tentonaxe/BrshS/5/

于 2013-10-22T22:04:10.013 回答