重置這個jQuery動畫

how to reset a jquery animation to start over?

但似乎並沒有在這種情況下工作。

我試圖重新啓動這個Kinetic Animation通過添加函數作爲回調在最後一場演出。

工作，但重置動畫對象沒有。

我錯過了什麼？ - 現在下面的代碼確實工作似乎

CODE

<!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>

來源

2012-05-21 mplungjan

此：

$('.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會反覆之後會完成，而不是當它會開始（你現在在做什麼）。

來源

2012-05-21 11:53:37 Engineer

嗯，很奇怪。現在工作我在函數回調中設置超時 - 我實際上已經在以前的版本中做過。謝謝 - 它不止一次地工作，但項目沒有重置 - 現在他們是 – mplungjan

@mplungjan我明白你的意思。問題是我認爲，你需要等待，直到動畫完成，並且只有在2000毫秒之後，才能嘗試重置它。 – Engineer

@mplungjan看我的更新也 – Engineer

重置這個jQuery動畫

回答

相關問題