0

我想要实现的是在到达更大 div 中的第一个/最后一个 div 时“停止”动画。

我的设置：首先我计算视图以从某个 div 开始，类为“关闭”，然后我使用导航按钮为 #all_fixtures 左/右设置动画。这一切都很好！

我需要的是动画在到达#all_fixtures包装器div 中的第一个/最后一个.fixture div时停止。

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 的宽度约为 200 像素并向右浮动（意味着 #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 回答