アニメーションキューを有効にする方法

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

をそして、それは動作しますが、何が間違っていることは、あなたが処理している方法です準備ができて関数内のアニメーションは、ので、これは動作します：

$(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'); 
}); 

を今、私は次々とこれらすべてのアニメーションを管理する方法であるため、あなたが探していると思うものを、Oの方法がいくつかあります

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

別の：FあなたはjQueryのからアニメーションが終了する、また.animation（）は、このように何度も呼び出すことができたときに制御することができるように、そのうちの一つ.promise（）（https://api.jquery.com/promise/）を使用している、これをやって例では、コールバック関数を使用してすることができます。

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

これは、 レオがお役に立てば幸いです。