0
我想看看重置这个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'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>
嗯,很奇怪。现在工作我在函数回调中设置超时 - 我实际上已经在以前的版本中做过。谢谢 - 它不止一次地工作,但项目没有重置 - 现在他们是 – mplungjan
@mplungjan我明白你的意思。问题是我认为,你需要等待,直到动画完成,并且只有在2000毫秒之后,才能尝试重置它。 – Engineer
@mplungjan看我的更新也 – Engineer