Question

您好我的网页上有4个Windows 8风格的实时图块，每个图块都无限循环，可以上下滑动动画。我可以使用调用自身的方法使其工作正常。但是，一旦用户点击其中一个磁贴，我想暂停此动画。单击一个图块后，它会扩展到页面的完整大小，但是当我希望它停止时，动画会继续。我试过实现stop（）函数无济于事。我试过停止（真实，真实）;无济于事。我已经尝试了一种“睡眠”方法，它将动画延迟率设置得非常高（停止），从而使动画“进入休眠状态”，但由于某种原因使它停在右侧幻灯片上是不可靠的。如果停止方法确实有效，它只是短暂工作，并且瓷砖全部变得不同步并且中断我也尝试了布尔检查，即如果点击停止但仍然没有运气。有没有人有什么建议？谢谢。

以下是一些示例代码：

function tiles()
{
setTimeout(function(){alltiles(news1,news2);},4000);

此方法在启动时被调用，并且tile通过alltiles（）开始动画; 4秒后这是动画完成的地方我已经包含了一个回调函数，所以每个动画在最后一个完成时开始。然后是异形（）;方法再次被调用以无限循环动画。

function alltiles(div1, div2){           
$(div1).delay(delayRate).animate({top: "-100%"}, speed, easing,
function(){});
$(div2).delay(delayRate).animate({top: "0"}, speed, easing,
function(){});
$(div1).delay(delayRate).animate({top: "0"}, speed, easing,
function(){});
$(div2).delay(delayRate).animate({top: "100%"},speed,easing,function(){
    alltiles(div1, div2);});

最后只是我实现鼠标的示例。我也尝试了独特的ID，但没有运气。

$('.tile,.tile2, .tile3, .tile4').mousedown(function(event) {
  $('.tile,.tile2, .tile3, .tile4').stop();
  $(this).addClass('selected');
 $(".tile, .tile2, .tile3, .tile4").not(this).fadeOut(100);
  $(this).delay(2000).animate({ width: "98%",height: "98%" }, 1000 );

Answer 1

如果你用这个开始整个事情：

alltiles(news1,news2);

然后继续在news1和news2上进行动画操作，然后，你需要用它来阻止它：

$(news1).stop(true);
$(news2).stop(true);

使用true传递.stop(true)参数会清除该特定对象的动画队列，因此也会停止任何排队操作。

将它放在点击处理程序中：

$('.tile, .tile2, .tile3, .tile4').mousedown(function(event) {
    $(news1).stop(true);
    $(news2).stop(true);
    $(this).addClass('selected');
    $(".tile, .tile2, .tile3, .tile4").not(this).fadeOut(100);
    $(this).delay(2000).animate({width: "98%", height: "98%"}, 1000 );
});

Answer 2

假设您有一个id="theStopButton"的按钮。如果用户点击它，它将停止使用$.fx.off = true的页面上的所有动画。

$('#theStopButton').click(function() {
    $.fx.off = true;
});

http://api.jquery.com/jquery.fx.off/

Answer 3

尝试添加必要的布尔值

http://api.jquery.com/stop/

.stop( true, true )

OR

.stop(true)

如何使用Jquery / javascript暂停我无限循环动画div的点击？

3 个答案: