私がデザインしている新しいサイトには、リンクを含むトップ div があります。そのリンクをクリックすると、div がコンテンツの高さ全体にアニメーション化されます。これは機能しますが、そのリンクをもう一度クリックして、divをアニメーション化して以前の状態に戻したいと思います。これは機能していません。
私はjQuery 1.5.2を使用しているため、.on()ではなく.delegate()を使用しています。jQuery のバージョンをアップグレードしないでください。
jQuery
// top bar & basket functionality
var topbarContractedHeight = $('#topbar').height(); // get current height
$('#topbar').css('height','auto'); // temp. set height to auto...
var topbarExpandedHeight = $('#topbar').height(); // ...and store it
$('#topbar').css('height',topbarContractedHeight); // put the height back to how it was
$('.topbarcontracted').delegate('#basket_trigger', 'click', function(){
$('#topbar').animate({ height: topbarExpandedHeight }, 500).removeClass('topbarcontracted').addClass('topbarexpanded'); // ...animate the height to the expanded height stored earlier, remove the 'contracted' class and add 'expanded'...
return false; // ...and don't process the link
});
$('.topbarexpanded').delegate('#basket_trigger', 'click', function(){
$('#topbar').animate({ height: topbarContractedHeight }, 500).removeClass('topbarexpanded').addClass('topbarcontracted'); // ...animate the height to the expanded height stored earlier, remove the 'expanded' class and add 'contracted'...
return false; // ...and don't process the link
});
その 2 番目の .delegate() イベントを発生させるにはどうすればよいですか?
http://jsfiddle.net/4KL2z/1/で心ゆくまでテストしてください。