Home/ Questions/Q 7963559
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T05:38:08+00:00

I tried to look at how to reset a jquery animation to start over?

  • 0

I tried to look at

how to reset a jquery animation to start over?

but that did not seem to work in this case.

I am trying to restart this Kinetic Animation by adding the function as a callback on the last show.

That worked, but resetting the animated objects did not.

What am I missing? – Now the code below does work it seems

DEMO

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This :

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

    simply means:

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

    That is why, animation will be called earlier than your animation will be fully completed.This means your attributes will be restored during the animation, not the after its end.

    Probably you need this:

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

    or:

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

    In this case the animation will be repeated after it will be finished, not when it will be started (what’s you are doing now).

    • 0