javascript - How to play jQuery Reel to a specific frame and stop there? - Stack Overflow

admin管理员组

文章数量:1318573

jQuery Reel () is an excellent jQuery plugin for creating nice 360-views of things.

There are events you can trigger to play, stop and pause the animation, and also to detect what frame you are currently on (.reel("frame")) but I can't really work out how to put them together to create a link which plays the reel of a specific frame, and then stops. Any suggestions?

jQuery Reel (http://jquery.vostrel.cz/reel) is an excellent jQuery plugin for creating nice 360-views of things.

There are events you can trigger to play, stop and pause the animation, and also to detect what frame you are currently on (.reel("frame")) but I can't really work out how to put them together to create a link which plays the reel of a specific frame, and then stops. Any suggestions?

• javascript
• jquery
• jquery-events

Share Improve this question Follow edited Sep 26, 2022 at 22:45 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Feb 14, 2012 at 13:03 NilsNils 47566 silver badges1818 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

You can "play" it, bind to "frameChange" event to check for the target frame and when that is reached, "stop" it. Something like this:

$('#your_reel_image')
.trigger('play')
.bind('frameChange', function(){
    if ($(this).reel('frame') == target_frame){
        $(this).trigger('stop');
    }
});

Just be aware of the fact, that on slower devices like mobiles, some frames may be skipped in order to keep up with the required animation speed.

You also receive the frame as third event handler argument to save yourself the additional .reel() call inside the handler, so the above can be refactored to:

$('#your_reel_image')
.trigger('play')
.bind('frameChange', function(e, depr_frame, frame){
    if (frame == target_frame){
        $(this).trigger('stop');
    }
});

EDIT:

Since version 1.3, you can replace the above solution with calling just:

$('#your_reel_image').trigger('reach', target_frame);

Reel will animate the shortest path towards the given frame and stop there.

本文标签： javascriptHow to play jQuery Reel to a specific frame and stop thereStack Overflow