jQuery技术:Jquery切换自定义动画

现在我觉得这是你原本想做的事情：

 $('#sign-in-fx').toggle( function() { $('.login_form').animate({ width: '273' }, 'slow', 'easeInOutQuart') }, function() { $('.login_form').animate({ width: '1' }, 'slow', 'easeInOutQuart') } ); 

您在元素上调用toggle()来设置动画，但必须在将接收click事件的元素上调用它。

toggle()使用了你使用它的方式， 不推荐使用 ！

使用标志，直接切换动画宽度，如下所示：

 var flag = true; $('#sign-in-fx').on('click', function() { $('.login_form').stop(true, true) .animate({ width: flag?'273':'1' }, 'slow', 'easeInOutQuart'); flag=!flag; });​ 

小提琴

或者如果你不喜欢全局变量，你总是可以使用data（）：

 $('#sign-in-fx').on('click', function() { var flag = $('.login_form').data('flag')!=undefined?$('.login_form').data('flag'):true; $('.login_form').stop(true, true) .animate({ width: flag?'273':'1' }, 'slow', 'easeInOutQuart') .data('flag', !flag); });​ 

小提琴

我想你也可以这样做：

 $('#sign-in-fx').click(function() { if (! $('.login_form').is(':animated')) { //if no animation running if ($('.login_form').width() > 1) { $('.login_form').animate({ width: '1' }, 'slow', 'easeInOutQuart'); } else { $('.login_form').animate({ width: '273' }, 'slow', 'easeInOutQuart'); } } }); 

你确定它是在document.ready上完成的吗？ 你的代码似乎很好。

需要了解更多jQuery教程分享Jquery切换自定义动画，都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!

  $(function () { $('.login_form').toggle( function() { $(this).animate({ width: '273' }, 'slow', 'easeInOutQuart') }, function() { $(this).animate({ width: '1' }, 'slow', 'easeInOutQuart') } ); });