javascript - jQuery - 悬停时淡入淡出动画

标签 javascript jquery animation effect

我有一个小的 jQuery 动画,当鼠标悬停在 :

时,它会在链接中淡出
$(function() {
  $('.delete').hide();
  $('#photos img').hover(function() {
    $(this).parents('li').children('.delete').fadeIn('fast');
  }, function() {
    $(this).parents('li').children('.delete').fadeOut('fast');
  });
});

但如果我快速将鼠标移入和移出图像,新动画总是会添加到队列中,当我停下来时,我会看到链接跳动了一会儿。我尝试使用 .stop(true),但有时淡入淡出效果根本不起作用(或仅达到小于 1 的不透明度值)。我能做什么?

谢谢,埃里克

最佳答案

最好的方法是使用hoverIntent插入。这涉及上述问题。它还为动画添加了轻微的延迟,因此如果用户碰巧将鼠标快速移动到所有链接上,您不会看到所有链接的丑陋动画流。

关于javascript - jQuery - 悬停时淡入淡出动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1219013/

相关文章:

javascript - 如何在backbone.js中显示 View (在router.js中不显示警报)?

javascript - ReactJS onClick ReactCSSTransitionGroup 动画

html - 间距 CSS 动画

javascript - Razor:从 p 标签中使用的字符串将图像扩展为 img 标签

javascript - Geoserver - 使用 DWITHIN 过滤点

javascript - 网格上的 JQuery 委托(delegate)方法

Javascript:检测脚本加载完成

JQuery:在 iPhone 上捕获 Enter + 完成/返回

jquery - 设置脚位置

java - 如何在android(Java)中设置lottiefiles动画的循环次数?