jQuery - SlideToggle、閉じるスクロールボタン？

Question

jQueryを初めて使用しました。私は.slideToggleを使って、私のすべてのコンテンツの一番下にDIVを表示させています。私はDIVを表示させるためのコードを持っており、ページはそのDIVまでスクロールしています。

ただし、コンテンツを非表示にしてスクロールバックする追加のボタン/リンクを作成したいとします。

私が持っているコードでは、このすべてを行うことができますが、ショーと非表示を切り替えるリンクは1つしかありません。これは非表示リンクがすべてのコンテンツの一番下に来るようにするためにはあまり役に立ちません。

どうすればいいか教えてください。ここで

jQueryのコード

var height = $('#slickbox').hide().height(); 
$('.more a').toggle(function() { 
    $('#slickbox').slideDown(3200); 
    $('html, body').animate({ scrollTop: '+=' + height }, 3200); 
    return false; 
}, function() { 
    $('#slickbox').slideUp(3200); 
    $('html, body').animate({ scrollTop: '-=' + height }, 3200); 
    return false; 
}); 

HTML

<div style="height: 300px; border: solid 1px #ddd;">I'm using space!</div> 
<div class="donate done"> 
    <h3 class="more"><a href="#" title="More"> More </a></h3> 
</div> 
<div id="slickbox"> 
    <div id="slide_show"> 
     <div id="slider"> 
      <ul> 
       <li> 
        <img alt="figure 1" src="http://dummyimage.com/700x1300/000/fff&text=I'm+a+picture!,+woohoo!" width="700" height="1300" /> 
       </li> 
       <li> 
        <img alt="figure 1" src="http://dummyimage.com/700x1300/000/fff&text=I'm+a+picture!,+woohoo!" width="700" height="1300" /> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 
<div class="close"> 
    <h3 class="more"><a href="#" title="More">Close</a></h3> 
</div> 

は、私がこれまで持っているものの一例である：あなたがより多くのボタンをクリックするとhttp://jsfiddle.net/eMYJx/47/

は、すべてが低下し、スクロール私が望むやり方。しかし、閉じるボタンを押すと、それを2回押す必要があります。これを回避する方法はありますか？

Answer 1

私はこれを好きです。 More/Closeを切り替えるリンクを1つ使用します。アニメーションコールバックを使用して切り替えます。また

http://jsfiddle.net/eMYJx/49/

var height = $('#slickbox').hide().height(); 
$('.more a').toggle(function() { 
    var $this = $(this); 
    $('#slickbox').slideDown(3200); 
    $('html, body').animate({ scrollTop: '+=' + height }, 3200, function() { 
     $this.html('Close'); 
    });  
    return false; 
}, function() { 
    var $this = $(this); 
    $('#slickbox').slideUp(3200); 
    $('html, body').animate({ scrollTop: '-=' + height }, 3200, function(){ 
     $this.html('More'); 
    }); 
    $(this).html('More'); 
    return false; 
}); 

あなたは両方のボタンを維持したい場合は、それぞれに個別のハンドラをバインドします。両方ともクリックではなく、もう一方はトグルコードの最初の部分を実行し、「閉じる」は後半を実行します。