0

我试着看

如何重置 jquery 动画以重新开始？

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

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

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

我错过了什么？-现在下面的代码似乎可以工作

演示

代码

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

1 回答 1

0

这 ：

$('.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-21T11:53:37.960 回答