0

私が達成しようとしているのは、より大きなdiv内の最初/最後のdivに到達したときにアニメーションを「停止」することです。

私の設定：最初に、クラス'closed'を使用して特定のdivで開始するようにビューを計算し、次にナビゲーションボタンを使用して#all_fixturesを左右にアニメーション化します。これはすべて正常に機能します！

必要なのは、 ＃all_fixturesラッパーdiv内の最初/最後の.fixturedivに到達したときにアニメーションを停止することです。

jQuery

// Find first div with the class '.closed' and start view there
$(function() {
$('#all_fixtures').css({marginLeft: -$('.closed').last().offset().left});
});

// Animate div left/right           
$('.scores_prev').click(function() {
$('#all_fixtures').animate({ 'left': '+=400px' }, 300 );
});
                
$('.scores_next').click(function() {
$('#all_fixtures').animate({ 'left': '-=400px' }, 300 );
});

HTML

   <div id="all_fixtures">
       <div class="fixture closed"> 4 </div>
       <div class="fixture closed"> 3 </div>
       <div class="fixture closed"> 2 </div>
       <div class="fixture closed"> 1 </div> <!-- start view here -->
       <div class="fixture"> 1 </div>
       <div class="fixture"> 2 </div>
    </div>
    <a class="scores_prev"> PREV </a>
    <a class="scores_next"> NEXT </a>

ノート：

  • all_fixturesは10000pxです

  • .fixtureは幅が約200pxで、右に浮かんでいます（#all_fixturesの左側に空きスペースがあることを意味します）

私はこれらの線に沿って何かを試しましたが、それを機能させることができませんでした：https ://stackoverflow.com/a/10410528/1864622

///

4

1 に答える 1

0

次のように#all_fixturesラッパー内の最初と最後の div を取得できます。

$("#all_fixtures div.fixture:first");
$("#all_fixtures div.fixture:last");

div を取得したら、 を呼び出してアニメーションを停止できます.stop()。要素で .stop() が呼び出されると、現在実行中のアニメーション (存在する場合) がすぐに停止します。たとえば、.stop() が呼び出されたときに要素が .slideUp() で非表示になっている場合、要素は引き続き表示されますが、以前の高さの一部になります。コールバック関数は呼び出されません。

于 2012-12-07T12:28:04.500 に答える