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