I am trying to set up this animated div so that it rolls across the screen once then stops unless the page is reloaded.
// JavaScript Document
jQuery(document).ready(function() {
$('#far-clouds').pan({
fps: 20,
no_of_frames: 24,
on_first_frame: function(obj) {
obj.spState(1); // change to state 1 (first row) on frame 1
},
on_last_frame: function(obj) {
obj.spStop(); // stop the animation on the last frame
},
on_frame: { // note - on_frame is an object not a function
19: function(obj) { // called on frame 19
obj.spState(2); // change to state 2 (row 2) on frame 19
},
16: function(obj) { // called on frame 16
obj.spState(3); // change to state 3 (row 3) on frame 16
}
}
});
$('#near-clouds').pan({
fps: 20,
no_of_frames: 24,
on_first_frame: function(obj) {
obj.spState(1); // change to state 1 (first row) on frame 1
},
on_last_frame: function(obj) {
obj.spStop(); // stop the animation on the last frame
},
on_frame: { // note - on_frame is an object not a function
19: function(obj) { // called on frame 19
obj.spState(2); // change to state 2 (row 2) on frame 19
},
16: function(obj) { // called on frame 16
obj.spState(3); // change to state 3 (row 3) on frame 16
}
}
});
});
JSFIDDLE: http://jsfiddle.net/PzBmb/2/
The plug in i'm using is spritely - the documentation for this version states that you can setup an obj.stop by using a reference to the frame which the animation should stop. The obj is #far-cloud. Which is .pan (panning) across the screen as an animation function that is handled by the plug in script. Then I am calling on the function to stop on the 19th frame. Its simply not working. It continues to loop. I can't seem to find a reason for this. Other than using a regular Jquery callback to stop it. I'm sure what else I can do.
So any assistance would be great. Thanks!