Detecting jQuery .stop()

I'm creating a jQuery plugin which adds some custom animations to an element and I want to detect when the .stop() method is called on that element. Here is an example:

(function( $ ){
    $.fn.myAnimation = function() {
        var myInterval = setInterval(func开发者_StackOverflow中文版tion() {
            // Do animation stuff
            if (.stop() == true) {
                clearInterval(myInterval);
            {
        });
    });
});

$(".element").myAnimation();
$(".element").stop();

So my question is, how do I do this:

if (.stop() == true)

Or is there a way to do it with an event handler like this:

this.bind("stop", function() {});

Or an I going about this completely the wrong way?

Many Thanks

Stephen

I assume you want to check to see if the element is animated. If so, you can use jQuery's :animated selector.

if( this.is(':animated') ) {...

If you're hoping to cancel the interval, you may just need to build that into the API as a custom method that the user calls which will stop the animation, and call clearInterval.

two possible solutions for this :

A) create a flag (2 ways to do that)
B) create a custom event

A-create a flag
1-you can use .attr() to add a flag

$('.element').stop().attr('stopped','')
//to check use :
if($('.element').is('[stopped]'))

2-if you don't want any attribute involved or any changing DOM structure
you can attach a tacit flag.
by using .data()to store arbitrary data :

$(".element").stop().data('stopped',true);

then retrieve it for checking purposes

if($(".element").data('stopped')) /** (1) **/

as for the plugin (as you mentioned here)
yes we can create one out of it :

// Stop() with a capital S, don't have to remind you jQuery is case sensitive
$.fn.Stop = function() {
  this.stop().data('stopped', true)
  return this
} // check the same way as i mentioned in (1)

B-create a custom event
if you don't want a flag of any type or whatsoever
you can create a custom event, since 'stop' isn't one
Documentation about creating custom events

$('*').on('stop', function() {
  $(this).stop()
  //any other Statements you want
  //in this case you may need to change the selector
  //to match only '.element'
})

the event is then triggered using .trigger() :

$('.element').trigger('stop')

Until I can find a way to add the jQuery :animated selector, I have come up with the following work around:

(function( $ ){
    $.fn.myAnimation = function() {
        this.addClass("isanimated");
        var myInterval = setInterval(function() {
            // do animation
            if (this.hasClass("isanimated") == false) {
                clearInterval(myInterval);
            }
        }, 1000);
    });
});

$(".element").myAnimation();
$(".element").removeClass("isanimated");

Code above not tested.

If anyone can suggests ways to add the :animated selector, I would be much appreciated.