jQuery .animate 回调在动画开始时触发答案

【问题标题】：jQuery .animate callback firing at start of animationjQuery .animate 回调在动画开始时触发
【发布时间】：2013-07-26 13:12:13
【问题描述】：

我对 .animate 函数的回调有疑问。当光标离开其父元素时，我试图让元素淡出。淡出后，该元素应该被隐藏，因此您不能将光标悬停在它上面或单击它。但是，隐藏元素的回调函数在动画开始时调用，而不是在结束时调用。我已经尝试了很多东西，但没有任何效果。如果需要，我可以发布我所有的代码（不多，只是一个带有一些我为自己制作的链接的小主页）。

var fadeIn = {opacity: "1"};
var fadeOut = {opacity: "0"};

$(".link-main").hover(function(){
    $(this).children(".link-sub").css("z-index", "10").show().animate(fadeIn, 100);
}, function(){
    // The animation.
    $(this).children(".link-sub").animate(fadeOut, 100, "swing", function(){
        $(this).hide();
    });
});

此外，无论出于何种原因，简单地使用 .fadeIn 和 .fadeOut 都不起作用。元素会立即消失。

提前致谢！

编辑：这就是我现在拥有的 jsfiddle.net/rqfcZ

【问题讨论】：

您是否将$.fx.off 设置为true？
重复问题见下面的stackoverflow问题。 stackoverflow.com/questions/5397260/…
我已经设法通过将动画链接在一起来做类似的事情，因此每个动画都在前一个的回调中运行。您应该能够在 animate() 而不是 hover() 上使用回调？
@Akash，不是重复的，这个提问者正确地将回调传递给animate()，而不是调用它。

标签： jquery callback jquery-animate hide

【解决方案1】：

.fadeIn 和 .fadeOut 执行 .show() 和 .hide() 本身。尝试删除它们而不使用 animate。

只要$(element).fadeOut()

对于事件，您使用的是旧的 jquery 语法。查看.on()的文档

【讨论】：

除非人们期望对动态创建的元素进行操作，否则不必使用 on()。 on() 方法取代了 live()，但不是所有的事件处理程序。
@isherwood 你是对的。但由于.hover 是.on('mouseenter mouseleave') 的简写（如文档中所述），我认为初学者最好只学习.on。他们弃用了其他特定功能，例如 .click()
@Paolo，您在哪里看到 click() 已弃用？
@isherwood 顺便说一句，你错了。正如文档所说：从 jQuery 1.7 开始，.on() 方法提供了附加事件处理程序所需的所有功能
@FrédéricHamidi 我的错。尚未弃用。

【解决方案2】：

@Frederic Hamidi 我的错……抱歉

请访问此链接以获取解决方案

http://fisherwebdev.com/wordpress/2009/06/08/scope-issues-with-the-callback-to-jquerys-animate-function/

快速浏览上面的链接并得出结论，您需要为此添加一个 ref 变量。

【讨论】：

我对JS/jQuery只有基本的了解，所以对文章不是很了解。您能否准确地告诉我我必须在代码中更改哪些内容？
我在这里编辑了你的小提琴jsfiddle.net/Akash619/ZdrZW，请看一下我添加的所有变量都是 $(this) 的 ref 变量，例如 var a=$(this);请配合使用以获得所需的功能...