animate（）は動的css（）のプロパティでは動作しません

Question

私は、この問題に遭遇したとき（私がやり終えようとしていたとき）に、私のアニメーションをさまざまな要素に対して動的に動作させるために取り組んでいました。 JQueryのcss（）メソッドを使用してプロパティをアニメートできません。私はアニメーションを、height、width、およびtopプロパティのハードコード値で処理することができました。ここでは、スニペットがあります：

function shrinkSection(section){ 
    var elem = section.SectionID; 
    $(elem).find(".content").fadeOut(500); 
    $(elem) 
     .animate({top: $(elem).css('top'), height: $(elem).css('height')}, 500) 
     .animate({width: $(elem).css('width')}, {duration: 500, 
     complete: function() { 
     $(elem).find(".icon").fadeIn(500); 
     $(elem).addClass("active"); 
       } 
     }); 
} 

console.log()は$(elem).css('[PROPERTY]')が正しいCSS値を返すていることが明らかになりました。なぜこれがうまくいかないのでしょうか？

Answer 1

animate（）メソッドはエフェクトをキューに入れ、最初のエフェクトアニメーションが終了して2番目のエフェクトアニメーションが開始されるまで待機して、連続して適用します。エフェクトキューにアニメーションを配置するかどうかを示すブール値またはString
Aブール：

キュー（デフォルト：真）
タイプjqueryのドキュメントから。 falseの場合、アニメーションはすぐに開始されます。 jQuery 1.7以降、queueオプションは文字列を受け入れることもできます。この場合、アニメーションはその文字列によって表されるキューに追加されます。カスタムキュー名を使用すると、アニメーションは自動的に開始されません。 .dequeue（ "queuename"）を呼び出して起動する必要があります。

あなたはアニメーションが「平行」で発生する場合は、あなたが行うことができます：

$(elem).find(".content").fadeOut(500); 

if($(elem).length) 
    $(elem) 
     .animate({ top: $(elem).css('top'), height: $(elem).css('height')}, 
        { duration: 500, 
        queue: false, 
        complete: function() { alert('callback!!'); } } 
       ) 
     .animate({ width: $(elem).css('width')}, 
        { duration: 500, 
        queue: false, 
        complete: function() { 
         $(elem).find(".icon").fadeIn(500); 
         $(elem).addClass("active"); 
        } 
       }); 
else 
    alert("No elem found!!"); 

お知らせの例では、あなたが効果を適用した上で要素elemが実際にあることを確認することができることjqueryによって見つかりました。
このようにして、DOMセレクタの問題も追跡できます。