问题排队动画

这里是我的代码：问题排队动画

$('#gallery-listA li.thumbnail').click(function() { 
      $(this).addClass('chosen'); 
      $('') 
      $('#gallery-listA li.thumbnail').not(this).addClass('notchosenA'); 
      $('#gallery-listB li.thumbnail').addClass('notchosenB'); 
      $('.notchosenB').fadeTo(500,0.0) 
      $('.notchosenB').hide(300); 
      });

的fadeTo和hide动画并行而不是连续运行。我可以加载动画作为回调或手动将它们放入一个队列，但不是jQuery应该自动排队动画？有没有人看到我的错误是什么？

来源

2011-08-21 dopatraman

尝试'$（ 'notchosenB'）fadeTo（500，0.0）.hide（300）; '。 – Alex

@Alex多数民众赞成在同一件事 – Rafay

你怎么知道他们并行运行？他们不在我的测试：http://jsfiddle.net/fkling/YUZ6J/ –

如果您想在fadeTo动画完成时执行某些操作，请将其放到fadeTo动画的完成函数中。

$('.notchosenB').fadeTo(500,0.0, function() { 
    $(this).hide(); 
});

另外，我不认为它使任何意义发送持续时间与.hide(300)当对象已经为零不透明，所以我删除了时间。

既然你正在消退到零不透明，它甚至更好，只需使用.fadeOut()它会褪色零不透明度，然后自动在年底隐藏的项目，所以你不需要.hide()

$('.notchosenB').fadeOut(500);

工作演示在这里：http://jsfiddle.net/jfriend00/ZrPL2/。

jQuery将排列连续的动画，但.hide()显然不被认为是一个动画，因此它不会进入队列（我在jsFiddle中进行了验证）。你可以看到，这将排队它们都按顺序运行：

$("#test").fadeOut(400).fadeIn(1000).fadeOut(400).fadeIn(1000);

见这里：http://jsfiddle.net/jfriend00/wBbnK/

来源

2011-08-21 16:45:33 jfriend00

@ jfriend00 - 我想过使用回调函数，但我需要排队的动画不止一个，所以使用多个嵌套的回调会变得混乱。我的印象是，jQuery自动排队动画，所以我想知道为什么它不起作用（并没有，我检查过）。有任何想法吗？ – dopatraman

我在排队动画的回答中添加了更多内容。可能最容易避免使用'.hide（）'，并使用其中一个隐藏像'fadeOut（）'这样的元素的动画。 – jfriend00

问题排队动画

回答

相关问题