Reputation: 45
I have the following code on my website....
At the moment, when "Test 1" is clicked the animation starts. After that, when "Test 2" or "Test 3" is clicked the animation does not restart...
How would I restart the animation when any of the links are clicked ?
And is it possible to have a Fade out and Fade In, after a link has been clicked ?
HTML Markup:
<div id="anim"></div>
</br>
</br>
<li id="item1"><span></span><a href="#">Test 1</a></li>
<li id="item2"><span></span><a href="#">Test 2</a></li>
<li id="item3"><span></span><a href="#">Test 3</a></li>
CSS:
#anim {
width: 14px; height: 14px;
background-image: url(http://mail.google.com/mail/im/emotisprites/wink2.png);
background-repeat: no-repeat;
}
Javascript:
var scrollUp = (function () {
var timerId, height, times ,i = 0 , element;
return {
stop : function(){
clearInterval( timerId );
},
init :function( h, t, el ){
height = h;
times = t;
element =el ;
},
start : function ( ) {
timerId = setInterval(function () {
if (i > times) // if the last frame is reached, set counter to zero
clearInterval(timerId);
element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up
i++;
}, 100); // every 100 milliseconds
}
};
})();
scrollUp.init(14, 40, document.getElementById('anim'));
// start animation:
document.getElementById('item1').addEventListener('click', function(){
scrollUp.start();
}, false );
Here's a Fiddle : http://jsfiddle.net/ctF4t/3/
Upvotes: 4
Views: 2319
Reputation: 3161
I changed your fiddle to this: http://jsfiddle.net/M5pe8/1/
It seems you didn't reset the "i" var, so the animation couldn't restart from the beginning (i.e., from "zero"); i left the alert line (but is commented out), to show you how i got to my conclusions:
if (i > times) // if the last frame is reached, set counter to zero
{
//alert(i + ' > ' + times);
clearInterval(timerId);
i = 0;
}
else
{
element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up
i++;
}
And, of course, i added the lines to bind the click event that starts the animation to the other two links (just for completeness). Now, clicking the second time the animation restarts. Is that what you needed?
EDIT: Link to fiddle corrected
Upvotes: 0
Reputation: 11058
As far as I understand, you want the animation (whatever state it is currently) to restart if one of the buttons is clicked?
Well, if so, first you should call the stop
function everytime before the start
:
document.getElementById('item1').addEventListener('click', function(){
scrollUp.stop();
scrollUp.start();
}, false );
Additionally, the index has to be reset in the stop
:
stop : function(){
clearInterval( timerId );
i = 0;
},
This will do the job for the button #item1
. Here is a demo. Applying this to the others should not be the big trouble now. For example bind the event to the <body/>
and read the target:
function startAnimation(e) {
e = e || window.event;
var target = e.target || e.srcElement;
target = target.parentNode;
if (!target.id.match(/item[0-3]/)) {
return e;
}
scrollUp.stop();
scrollUp.start();
}
document.body.addEventListener('click',startAnimation,false);
Upvotes: 2
Reputation: 123473
How would I restart the animation when any of the links are clicked ?
To define a restart
, you'll want to stop
any still-running intervals, reset i
to 0
since that marks the "beginning," and start
a new interval:
return {
// ...
restart: function () {
this.stop();
i = 0;
this.start();
}
};
You then need to bind to each li
so they can all perform a restart()
:
var items = document.querySelectorAll('#item1, #item2, #item3');
for (var i = 0, l = items.length; i < l; i++) {
items[i].addEventListener('click', function () {
scrollUp.restart();
}, false);
}
Upvotes: 0