jqueryのアニメーション効果と問題

Question

Live Example Here

• 押して、ボタンのいずれかを有します。あなたは不安定なslideDown効果を見ることができますか？実際には滑らかで遅い滑りでなければなりません。
• ボタンを1回押した場合は、もう1つのボタンを押してみてください。フォームの表示と非表示はひどいです。

animの間。

アニメーションの後。

この問題を解決するにはどうすればよいですか？

Answer 1

は.animate()と.fadeIn().fadeOut().fadeTo(time,opacity)だけではなく.show()または.hide()

でプレイしてみてください

Answer 2

それは私にとって非常にうまくいっています。しかし、最初にロードするには長い時間がかかりました。あなたが行く場所：http://gtmetrix.com/reports/tural.no-ip.org/ANBNA45nあなたのページが非常にゆっくりと読み込まれていることがわかります。あなたが見ている吃音の影響は、おそらくあなたのコンピュータから来ている情報量に問題があるからです。

Answer 3

揺れが起こっているようですタブ内の各要素が非表示または表示されているとき

各タブの高さを取得し、各要素が非表示または表示された後に個別にアニメーション化するのではなく、その高さにリサイズアニメーションを実装します。

Answer 4

$（セレクタ）呼び出しを少なくすることで、速度を上げようとすることができます。複数回使用しているときにjQueryオブジェクトの一部をキャッシュする... jQueryオブジェクトの関数をチェーンできることも忘れないでください。 jQO.addClass("foo").removeClass("bar");はそうのようなjQO.addClass("foo"); jQO.removeClass("bar");

と同じです...

(function(){ 
    var signin = $("#signin"), signup = $("#signup"), signin_f = $("#signin_form"), holder = $("#holder"), signup_f = $("#signup_form"), f_container = $("#form_container"); 
    $(".button").click(function() { 
     if (counter === 0) { 
      signin.removeClass('default_radius').addClass('right_radius'); 
      signup.removeClass('default_radius').addClass('left_radius'); 
      $("#first").animate({ 
       marginTop: "-=150px", 
      }, 500); 
     } 
    }); 
    signup.click(function() { 
     if (counter === 0) { 
      holder.addClass('red_border').slideDown("slow"); 
      f_container.show(); 
      signup_f.show(0); 
     } else { 
      signin_f.hide(0); 
      holder.switchClass("green_border", "red_border", 1000); 
      f_container.animate({height:"260px"},1000); 
      signup_f.show(0); 
     } 
     counter++; 
    }); 
    signin.click(function() { 
     if (counter === 0) { 
      holder.addClass('green_border').slideDown("slow"); 
      f_container.show(); 
      signin_f.show(1000); 
     } else { 
      signup_f.hide(0); 
      holder.switchClass("red_border", "green_border", 1000); 
      f_container.animate({height:"110px"},1000); 
      signin_f.show(0); 
     } 
     counter++; 
    }); 
})();