重置这个 jQuery 动画答案

【问题标题】：Reset THIS jQuery animation重置这个 jQuery 动画
【发布时间】：2012-05-21 11:38:25
【问题描述】：

我试着看看

how to reset a jquery animation to start over?

但在这种情况下似乎不起作用。

我正在尝试通过将函数添加为最后一个节目的回调来重新启动这个Kinetic Animation。

这有效，但重置动画对象没有。

我错过了什么？ - 现在看来下面的代码确实可以工作了

DEMO

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>jQuery Powered Kinetic Text Animation</title>
<link href="http://demo.campolar.me/Kinetic-Animation/css/font-face.css" rel="stylesheet" type="text/css" />
<link href="http://demo.campolar.me/Kinetic-Animation/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
function animation() {

   // my attempt to reset
        $('.first').removeAttr('style');
        $('.second').removeAttr('style');
        $('.shadow1').removeAttr('style');
        $('.second .a').removeAttr('style');
        $('.second .b').removeAttr('style');
        $('.second .c').removeAttr('style');
        $('.third').removeAttr('style');
        $('.fourth').removeAttr('style');
        $('.fifth').removeAttr('style');
        $('.fifth .a').removeAttr('style');
        $('.fifth .b').removeAttr('style');
        $('.fifth .c').removeAttr('style');
        $('.fifth .d').removeAttr('style');
        $('.sixth').removeAttr('style');
   // end reset attempt

   // original code

        $('.first').animate({right: '1500px'}, 3000);
        $('.first').animate({left: '1000px'}, 500);
        $('.shadow1').delay(3800).show(1000);
        $('.second .a').delay(3800).show(500);
        $('.second .b').delay(4000).show(500);
        $('.second .c').delay(4200).show(500);
        $('.third').delay(6200).animate({bottom: '125px'}, 500);
        $('.shadow1').delay(1800).hide(500);
        $('.second .a').delay(3500).animate({bottom: '30px'}, 300);
        $('.second .b').delay(3800).animate({bottom: '30px'}, 300);
        $('.second .c').delay(4100).animate({bottom: '30px'}, 300);
        $('.second').delay(10000).hide(500);
        $('.third').delay(3500).animate({top: '125px'}, 500);
        $('.fourth').delay(10500).show(500);
        $('.fifth .a').delay(12000).animate({left: '85px'}, 300);
        $('.fifth .b').delay(12300).animate({left: '95px'}, 300);
        $('.fifth .c').delay(12600).animate({left: '180px'}, 300);
        $('.fifth .d').delay(12900).animate({left: '100px'}, 300);
        $('.fourth').delay(4000).animate({'font-size': '150px', 'bottom': '50px', 'right': '50px'}, 300);
        $('.fifth').delay(15000).hide(500);
        $('.fourth').delay(2000).hide(500);
        $('.sixth').delay(18000).show(1000,function() {
                setTimeout(animation,2000)
            });
}
$(function() {
  animation()   
});

</script>
</head>

<body>

<div id="wrapper">
    <h1>Kinetic Text Animation using jQuery</h1>
    <p>Welcome to my try at making a small kinetic animation using jquery. It doesn&#39;t 
    include many fancy things, but this is just something i wanted to try and looks 
    like I&#39;ve done it. To play this, click the play button below (not visible? Enable javascript or wait for it to load). You need javascript 
    enabled and a @font-face supporting browser.</p>
    <p>The animation works in the black box, which is 650x400 pixels. So make sure 
    the visible portion of your screen fits it. This will be fine on a least of 
    1024x768 pixel resolution.</p>
    <p><a href="http://campolar.me/2010/05/kinetic-text-animation-using-jquery/">Read the whole article here!</a></p>
    <p>I hope you like it :)</p>
    <p class="play"><img src="images/play.png" alt="Play" />Play!</p>
</div>
<div class="animationwindow">
    <div class="first nevis">
        Do you know?</div>
    <!-- slides from hidden left to hidden right -->
    <div class="second museo">
        <div class="a">
            WHAT</div>
        <div class="b">
            THIS</div>
        <div class="c">
            IS?</div>
    </div>
    <div class="shadow1">
    </div>
    <div class="third museo">
        DO YOU KNOW? </div>
    <div class="fourth nevis">
        No? </div>
    <div class="fifth museo">
        <div class="a">
            Are</div>
        <div class="b">
            You</div>
        <div class="c">
            Kidding</div>
        <div class="d">
            Me?</div>
    </div>
    <div class="sixth museo">
        This is a kinetic animation, achieved using <br />
        <span>jQuery!!!</span> </div>
</div>
<div id="CampolarDesigns">
</div>

</body>

</html>

【问题讨论】：

标签： jquery css

【解决方案1】：

这个：

$('.sixth').delay(18000).show(1000,
setTimeout(function() { // my change to loop the animation
  animation()
},2000));

简单的意思是：

$('.sixth').delay(18000).show(1000, timeoutIdThatReturnedBySetTimeoutFunction); //
setTimeout(function() { // my change to loop the animation
  animation()
},2000);

这就是为什么animation会在你的动画完全完成之前被调用。这意味着你的属性将在动画期间恢复，而不是在动画结束之后。

可能你需要这个：

$('.sixth').delay(18000).show(1000,function(){
    setTimeout(function() { // my change to loop the animation
       animation()
    },2000);
});

或：

$('.sixth').delay(18000).show(1000,function(){
    setTimeout( animation, 2000 );
});

在这种情况下，animation 将在它完成之后重复，而不是在它开始时重复（你现在在做什么）。

【讨论】：

嗯，很奇怪。现在可以工作了，我在函数回调中设置了超时-实际上我在以前的版本中已经这样做了。谢谢 - 它不止一次工作，但项目没有重置 - 现在他们是
@mplungjan 我明白你的意思。问题是我认为，你需要等到动画完成，然后在 2000 毫秒后，才能尝试重置它。
我认为是最后一场演出之后的延迟，需要在演出结束后才重置。当我刚刚做 show(1000,animation) 之后它跑得太快了 - 然后我添加了超时但没有添加到函数中（我的想法）。无论如何，它现在似乎工作正常。谢谢