重置此jQuery动画 [英] Reset THIS jQuery animation
本文介绍了重置此jQuery动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试着看看
但是在这种情况下似乎无效。 / p>
$（'。sixth'）。delay（18000）.show（1000，function（）{
setTimeout {// my change to loop the animation
animation（）
}，2000）;
}）;
或：
code> $（'。sixth'）。delay（18000）.show（1000，function（）{
setTimeout（animation，2000）;
}
在这种情况下，动画之后将会完成，而不是开始（您现在正在做什么）。
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
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't
include many fancy things, but this is just something i wanted to try and looks
like I'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>
解决方案
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).
这篇关于重置此jQuery动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
