如何激活动画队列

Question

我想使用jQuery排序动画列表。以下是我的代码，但似乎有一个语法错误。

$(document).ready(function()
  {
   $('p:first').animate({height: 'hide'}, 'easeOutCirc');
   $('p:first').animate({height: 'show'}, 1000, 'easeOutElastic');
  },
  {
   $('#Op-Excellence').animate({height: 'hide'}, 500, 'easeOutCirc');
   $('#Op-Excellence').animate({height: 'show'}, 2000, 'easeOutBounce');
  },
  {
   $('#Lenti').animate({height: '+=300px'}, 'easeInSine');
   $('#Lenti').animate({height: '-=300px'}, 2500, 'easeOutSine');
  },
  {
   $('#Higgs').animate({paddingRight: '+=300px'}, 'easeInSine');
   $('#Higgs').animate({paddingRight: '-=300px'}, 3500, 'easeOutSine');
   $('#Ferrari').animate({height: '+=150px'}, 'easeInSine');
   $('#Ferrari').animate({height: '-=150px'}, 3000, 'easeOutSine');
   $('#Tatia').animate({paddingLeft: '+=300px'}, 'easeInSine');
   $('#Tatia').animate({paddingLeft: '-=300px'}, 2500, 'easeOutSine');
   $('#Charrey').animate({paddingBottom: '+=300px'}, 'easeInSine');
   $('#Charrey').animate({paddingBottom: '-=300px'}, 2500, 'easeOutSine');
   $('#Zur').animate({width: '-=50%'}, 'easeInSine');
   $('#Zur').animate({width: '+=50%'}, 3000, 'easeOutSine');
   $('#jQueryFiorentini').animate({height: 'hide'}, 500, 'easeInSine');
   $('#jQueryFiorentini').animate({height: 'show'}, 2500, 'easeOutSine');
  queue: true
});

Answer 1

你的JQuery代码的高度是一个字符串不是问题，实际上你可以做同样的代码:

$('#Op-Excellence').animate({height: 'hide'}, 500, 'easeOutCirc');

它会工作，它的问题是你在ready函数中处理动画的方式，所以这将工作:

$(document).ready(function(){
    $('p:first').animate({height: 'hide'}, 'linear');
    $('p:first').animate({height: 'show'}, 1000, 'linear');
    $('#Op-Excellence').animate({height: 'hide'}, 500, 'linear');
    $('#Op-Excellence').animate({height: 'show'}, 2000, 'linear');
    $('#Lenti').animate({height: '+=300px'}, 'linear');
    $('#Lenti').animate({height: '-=300px'}, 2500, 'linear');
    $('#Higgs').animate({paddingRight: '+=300px'}, 'linear');
    $('#Higgs').animate({paddingRight: '-=300px'}, 3500, 'linear');
    $('#Ferrari').animate({height: '+=150px'}, 'linear');
    $('#Ferrari').animate({height: '-=150px'}, 3000, 'linear');
    $('#Tatia').animate({paddingLeft: '+=300px'}, 'linear');
    $('#Tatia').animate({paddingLeft: '-=300px'}, 2500, 'linear');
    $('#Charrey').animate({paddingBottom: '+=300px'}, 'linear');
    $('#Charrey').animate({paddingBottom: '-=300px'}, 2500, 'linear');
    $('#Zur').animate({width: '-=50%'}, 'linear');
    $('#Zur').animate({width: '+=50%'}, 3000, 'linear');
    $('#jQueryFiorentini').animate({height: 'hide'}, 500, 'linear');
    $('#jQueryFiorentini').animate({height: 'show'}, 2500, 'linear');
});

现在，我认为你正在寻找的是如何管理所有这些动画一个接一个，有几种方法可以做到这一点，其中之一是使用。promise() (https://api.jquery.com/promise/)，这样你就可以控制动画何时完成，也。animation()从JQuery可以调用多次，像这样:

$( "#Higgs" )
    .animate({
        width: "90%"
}, {
    queue: false,
    duration: 3000
})
    .animate({ fontSize: "24px" }, 1500 )
    .animate({ borderRightWidth: "15px" }, 1500 );
});

另一个例子是使用回调函数:

$('#Higgs').animate({paddingRight: '+=300px'}, 'linear', function(){
    alert('This triggers after animation is complete');
});

希望这有帮助，利奥。