jQuery：スライドトグル||コードへの最適化は？

Question

こんにちは私はプログラミングのjQueryに新しいと私は誰かが私のためにテストすることを愛するクイックコードスニペットがあります。

私はそれがうまくいくと思っています。しかし、それを処理する最良の方法がわからないのです。

作業例：ここではhttp://jsfiddle.net/zWnLv/29/

//hide wrapper at document ready 
     $('#newsbox_content_wrapper').hide(); 

     //toggle visiblility of newsbox and slide down to scroll window to newsbox 
     $('.newsbox_toggle').bind('click', function() { 
      //define speed for effect 
      var $speed = 400; 

      //check to see if the class 'open' exists then run 
      if ($('.newsbox_toggle').hasClass('open')) { 
       //scroll to the top of the newsbox 
       $('html, body').animate({scrollTop: $('#header_lower').offset().top}, $speed); 
       $('#newsbox_content_wrapper').slideDown($speed); 
       $('.newsbox_toggle').removeClass('open'); 
       //delay HTML replacement to sync with animation 
       $('.newsbox_expand').delay($speed).queue(function(n) { 
        $(this).html('Click to Close News Feature.'); 
        $(this).addClass('rotate'); 
        n(); 
       }); 
      } else { 
       //scroll back to top of body 
       $('html, body').animate({ scrollTop: 0 }, $speed); 
       $('#newsbox_content_wrapper').slideUp($speed); 
       $('.newsbox_toggle').addClass('open'); 
       //delay HTML replacement to sync with animation 
       $('.newsbox_expand').delay($speed).queue(function(n) { 
        $(this).html('Click to Read More.'); 
        $(this).removeClass('rotate'); 
        n(); 
       }); 
      } 
     }); 

Answer 1

「最適化する」唯一の方法は、手動で機能を遅延させる代わりにコールバックを使用することです。 .slideUp()および.slideDown()は、アニメーションの終了後に実行されるコールバックを受け入れます。 チェーンを使用するのがベストプラクティスなので、オブジェクトを再作成する必要はありません（コールバック関数を参照）。

さらに、bind()関数を、新しいon()（jQuery 1.7で追加された）に変更しました。あなたはjQueryの< 1.7を使っているのであれば

$('.newsbox_toggle').on('click', function() { 
    //define speed for effect 
    var $speed = 400; 

    //check to see if the class 'open' exists then run 
    if ($('.newsbox_toggle').hasClass('open')) { 
     //scroll to the top of the newsbox 
     $('html, body').animate({scrollTop: $('#header_lower').offset().top}, $speed); 
     $('#newsbox_content_wrapper').slideDown($speed, function() { 
      $('.newsbox_expand').html('Click to Close News Feature.').addClass('rotate'); 
     }); 
     $('.newsbox_toggle').removeClass('open'); 
    } else { 
     //scroll back to top of body 
     $('html, body').animate({ scrollTop: 0 }, $speed); 
     $('#newsbox_content_wrapper').slideUp($speed, function() { 
      $('.newsbox_expand').html('Click to Read More.').removeClass('rotate'); 
     }); 
     $('.newsbox_toggle').addClass('open'); 
    } 
}); 

、.bind()の省略形です.click()を、使用しています。

$('.newsbox_toggle').click(function() { 
    // ... 
}); 

Answer 2

は、あなたが（スクロールして）行く：http://jsfiddle.net/zWnLv/43/

//hide wrapper at document ready and put in var for re-use 
var newsbox = $('#newsbox_content_wrapper').hide(); 

//toggle visiblility of newsbox and slide down to scroll window to newsbox 
$('.newsbox_toggle').bind('click', function() { 
    newsbox.slideToggle("slow",function() { 
     $('html, body').animate({ scrollTop: newsbox.offset().top }, 'slow'); 
    }); 

}); 

限りあなたはたくさんのオプションを持っているあなた... "の続きを読むにはクリックしてください" と毎回テキストを切り替えることができます。または自分の好みで+/-（または矢印）背景画像でクラスを切り替えて、ユーザーが直感的にそのセクションを開いたり閉じたりできるようにすることができます。