jquery - 按顺序运行 JQuery 动画

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 }); }