document.ready（function）

Question

の場合は、hide関数とアニメーションをどのように実行するのですか？これは私の最初の質問です。 ページの準備が整っているときに要素を隠すようにしていますし、アニメーションも隠すようにしています。それだけでは機能しません。私の英語は申し訳ありません。また、Jqueryの新機能もあります。ここでは、コードを参照してください。

$(document).ready(function(){ 
    $("#mainbox-search-main").show(); 
    $("#mainbox-search-extra").hide(); 
    $("#mainbox-login").hide(); 
    $("#mainbox-register").hide(); 
    $("#mainbox-pasfor").hide(); 
    $(".fab").animate({ 
     -webkit-transition-duration: 1s /* Safari */ 
     transition-duration: 1s 
     -ms-transform: rotate(180deg) /* IE 9 */ 
     -webkit-transform: rotate(180deg) /* Safari */ 
     transform: rotate(180deg) 
    }); 
}); 

Answer 1

それはJSFiddleせずにそれを複製するのは難しい：http://www.jsfiddle.net

しかし、それは自分自身で簡単にちょうどそれらのプロパティを持つクラスを追加するために：

jQueryの

$(".fab").addClass('animate-it'); 

CSS

.animate-it{ 
    -webkit-transition-duration: 1s /* Safari */ 
    transition-duration: 1s 
    -ms-transform: rotate(180deg) /* IE 9 */ 
    -webkit-transform: rotate(180deg) /* Safari */ 
    -moz-transform: rotate(180deg) /* Firefox */ 
    transform: rotate(180deg) 
} 

さらに、ドキュメントを読み込むときに要素を非表示にする必要はありません。最初にこれらのディスプレイをnoneに設定してください。

#mainbox-search-extra, #mainbox-login, #mainbox-register, #mainbox-pasfor{ 
    display:none; 
} 

あなたはちょうどあなたが#mainbox-search-main要素のために使用されているshow()メソッドを使用し、それらを表示します。

は、私はまた、あなたがた場合にアニメーションに遅延を追加することもあることを指摘したい不要なタイムラグをアドレッシング

は

があったときにアニメーション火災の間にいくつかの望ましくないラグタイムで、DOMを考えますロードされる。

$(".fab").delay(500).addClass('animate-it'); 

結論：CSSでの世話をされている隠された要素を持つコールバック関数

を追加し、我々はで動作するコードの短い量を持っています。 #mainbox-search-main要素が示された後にアニメーションが起こることを保証するために、それにコールバック関数を追加してみてください：

$(document).ready(function(){ 
    $("#mainbox-search-main").show(function(){ 
     $(".fab").delay(500).addClass('animate-it'); 
    }); 
});