Question

我正在尝试按顺序运行jquery动画，但似乎无法让它正常工作......

// Run this animation first hiding fading all divs but selected one

if (divid!= '1') { $('#div1').animate({ 'opacity': 0 }, 500); }
if (divid!= '2') { $('#div2').animate({ 'opacity': 0 }, 500); }
if (divid!= '3') { $('#div3').animate({ 'opacity': 0 }, 500); }
if (divid!= '4') { $('#div4').animate({ 'opacity': 0 }, 500); }
if (divid!= '5') { $('#div5').animate({ 'opacity': 0 }, 500); }

once all the above animations have finished do the next lot...

if (cargroup != '1') { $('#div1').hide(500); }
if (cargroup != '2') { $('#div2').hide(500); }
if (cargroup != '3') { $('#div3').hide(500); }
if (cargroup != '4') { $('#div4').hide(500); }
if (cargroup != '5') { $('#div5').hide(500); }

依旧......

Answer 1

将aninmate方法的queue属性设置为true。它将按顺序动画。试试这个

if (divid!= '1') { $('#div1').animate({ 'opacity': 0 }, { queue: true, duration: 500 }); }
if (divid!= '2') { $('#div2').animate({ 'opacity': 0 }, { queue: true, duration: 500 }); }
if (divid!= '3') { $('#div3').animate({ 'opacity': 0 }, { queue: true, duration: 500 }); }
if (divid!= '4') { $('#div4').animate({ 'opacity': 0 }, { queue: true, duration: 500 }); }
if (divid!= '5') { $('#div5').animate({ 'opacity': 0 }, { queue: true, duration: 500 }); }

Answer 2

你有两个选择......首先试用{ queue: true, duration: 500 }代替500，然后尝试将你的逻辑稍微清理一下，就像下面的内容一样。

我无法测试这个，但它应该给你这个想法。说实话，我会为所有像“.togglers”这样的div添加一个类，然后做这样的事情。因为他们显然都是div ...尝试这个

$(".togglers").each(function(){
    if(divid!=$(this).attr("id")){
        $(this).animate({ 'opacity': 0 }, 500);
    }
});
$(".togglers").each(function(){
    if(cargroup!=$(this).attr("id")){
        $(this).hide(500);
    }
});

Answer 3

将第二个块包装在一个名为hideDivs（）的函数中，并在第一个块的最后一行中添加此函数，如下所示：

if (divid!= '5') { $('#div5').animate({ 'opacity': 0 }, 500, hideDivs); }

编辑：这就是我的意思：

if (divid!= '1') { $('#div1').animate({ 'opacity': 0 }, 500); }
if (divid!= '2') { $('#div2').animate({ 'opacity': 0 }, 500); }
if (divid!= '3') { $('#div3').animate({ 'opacity': 0 }, 500); }
if (divid!= '4') { $('#div4').animate({ 'opacity': 0 }, 500); }
if (divid!= '5') { $('#div5').animate({ 'opacity': 0 }, 500, hideDivs); }

function hideDivs() {
   if (cargroup != '1') { $('#div1').hide(500); }
   if (cargroup != '2') { $('#div2').hide(500); }
   if (cargroup != '3') { $('#div3').hide(500); }
   if (cargroup != '4') { $('#div4').hide(500); }
   if (cargroup != '5') { $('#div5').hide(500); }
}

还可以考虑重构您的代码，如Relic的帖子所示。通过使用each，第一个块（没有条件）可能看起来像这样：

$('#div1, #div2, #div3, #div4, #div5').each(function() {
     if ($(this).attr('id') != 'div5') $(this).animate({ 'opacity': 0 }, 500);
     else $(this).animate({ 'opacity': 0 }, 500, hideDivs);    
});

Answer 4

如果你这样做，他们将无法按顺序运行。你正在做的就是将动画排队并隐藏效果直到控件返回到jQuery - 这可能意味着这些块最终会隐藏起来。你需要的是每个动画传递一个回调函数，在动画完成时调用，然后你的回调函数启动下一个。有关示例，请参阅http://api.jquery.com/animate/和http://api.jquery.com/hide/。

按顺序运行JQuery动画

4 个答案: