I have read through countless SO posts and have made numerous attempts, but a whole afternoon later I am still stuck.
My code, combined with the jquery plugin that I am using can be seen here at this jsfiddle
What am I trying to do?
For this project I am making a call to the iTunes API, which provides me with a list of songs by a named artist. I am then storing these mp4a files (one example) in an array, and each time the record image is clicked (see jsfiddle) the next song/item in the array is played. Each of these snippets is 30 seconds. This works fine.
Jquery Issues
I am using the jquery animation plugin to spin the record image for 30 seconds as that is the length each song. This works fine with the code below/jsfiddle if I click the record once and only play one song. However, if I click on the record to play the next song a new 30 seconds is added on each click. Again, this is no problem if I wait until the end of a song, but if I click, lets say, three times, all of sudden 90 seconds are added to the animation length.
Is anyone able to help so that I can ensure that the count cannot be greater than 30? I have tried all sorts of if/else statements, but disappointingly cannot crack it. Also, I have gone through the jquery rotate plugin code with a fine toothcomb, and tried change some of the code in there, but also to no avail.
Currently my jquery code is as follows, which is combined with the plugin code:
$(document).ready(function () {
$('#btn').click(function(){
$(this).rotate({ count:30, forceJS:true });
});
});
HTML
<img src="http://www.entertainmentayr.com/joey_Lawrence_files/entertayr%20gold%20record%20LP%20logo%20small%20.png" id="btn">
You can use jQuery's built in .stop( [clearQueue ] [, jumpToEnd ] ) method to stop the animation before you start a new one using the rotate plugin. Setting clearQueue to true will prevent any extra animations from being run after stopping the current one, and setting jumpToEnd will prevent it from starting the animation mid-stream. Without jumpToEnd it will still try to take a full second to do whatever is left in the rotation, which will look weird if you click just before it finishes the rotation - try experimenting with this turned on or off to see the difference.
$(this).stop(true, true).rotate({ count: 30, forceJS: true });