如何防止这个奇怪的jQuery .animate（）滞后？
见demo： jsFiddle
- 点击“显示”/“取消”时，我有一个简单的表单正在切换
- 一切正常，但如果您在表单显示后立即点击“取消”，则在动画开始之前有2-3秒的延迟 。
- 如果您在单击“取消”之前等待几秒钟，则不会发生这种情况。
- 在所有测试的浏览器中都会出现滞后（即ff，chrome）。
1.什么可能导致这种滞后，如何预防？
2.有没有更好的方法来编码这一系列的动画，这可能会阻止任何滞后？
HTML ：
jQuery的：
$("#newResForm").css({opacity: 0}); $("#addRes").click(function () { toggleNewRes() }); $("#cancelNewRes").click(function () { toggleNewRes() }); //toggleNewRes function toggleNewRes() { if ($("#newResFormWrap").css('display') == "none") {//if hidden $("#addRes").animate({ opacity: 0 }, 'fast', function() { $("#newResFormWrap").toggle('fast', function (){ $("#newResForm").animate({ opacity: 100 },2000); }); }); } else { //if visible $("#newResForm").animate({ opacity: 0 }, 100,function() { $("#newResFormWrap").toggle('fast', function (){ $("#addRes").animate({ opacity: 100 }); }); }); } }
使用stop()开始新动画时，请务必清除队列：
$("#newResForm").stop().animate({ opacity: 0 }, 100,function() { $("#newResFormWrap").toggle('fast', function (){ $("#addRes").animate({ opacity: 100 }); // ...
导致滞后的原因是你的长2秒动画$("#newResForm").animate({ opacity: 100 },2000)还没有完成。 JQuery默认将动画放入队列，在下一个开始之前等待一个完成。 使用stop()清除队列，如果您有两个相互矛盾的动画（如打开和关闭动画，或鼠标hover/鼠标移动动画），这将特别有用。 实际上，您可能会发现使用stop()开始所有动画链是一个好习惯，除非您知道您希望它们与之前可能在其他地方发生过的动画一起排队。
进入更高级的主题，您甚至可以命名不同的队列，以便例如您的hover动画和展开/折叠动画被单独处理以用于stop() 。 有关详细信息，请参阅http://api.jquery.com/animate/上的queue选项（如果给定字符串）。
尝试使用stop() ：
这是jsfiddle。
if ($("#newResFormWrap").is(':visible')) {//this way is eaiser to check $("#addRes").stop(true,false).animate({ opacity: 0 }, 'fast', function() { $("#newResFormWrap").toggle('fast', function (){ $("#newResForm").animate({ opacity: 100 },2000); }); }); }
几件事。 首先看看这个JSFiddle ，看看它在行动中。
你遇到的问题是你的动画淡入需要2秒钟。 因此，当您在2秒内关闭它时，您会遇到延迟。
我重新校准了你的时间，以确保没有延迟。 看看你是否喜欢它们，随意根据自己的喜好改变它们。
if ($("#newResFormWrap").css('display') == "none") {//if hidden $("#addRes").animate({ opacity: 0 }, 'fast', function() { $("#newResFormWrap").toggle(0, function (){ $("#newResForm").animate({ opacity: 100 },400); }); }); } else { //if visible console.log('click'); $("#newResForm").animate({ opacity: 0 }, 0, function() { console.log('animated'); $("#newResFormWrap").toggle(0) }); $("#addRes").animate({ opacity: 100 }, 'fast'); }
在动画调用之前添加.stop() ：
function toggleNewRes() { if ($("#newResFormWrap").css('display') == "none") {//if hidden $("#addRes").stop().animate({ opacity: 0 }, 'fast', function() { /... }); } else { //if visible $("#newResForm").stop().animate({ opacity: 0 }, 100,function() { /... }); } }