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 に答える