检测jQuery .stop()

Question

我正在创建一个jQuery插件，它将一些自定义动画添加到一个元素中，我想要检测在该元素上调用.stop()方法的时间。下面是一个示例：

(function( $ ){
    $.fn.myAnimation = function() {
        var myInterval = setInterval(function() {
            // Do animation stuff
            if (.stop() == true) {
                clearInterval(myInterval);
            {
        });
    });
});

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

所以我的问题是，我该怎么做：

if (.stop() == true)

或者，有没有像这样的事件处理程序可以做到这一点：

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

或者我是不是完全走错了路？

非常感谢

斯蒂芬

Answer 1

在我找到添加jQuery ：动画选择器的方法之前，我想出了以下解决方法：

(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");

上面的代码没有经过测试。

如果有人能建议添加：动画选择器的方法，我将不胜感激。

Answer 2

我假设您想检查元素是否为动画元素。如果是这样，您可以使用jQuery's :animated selector。

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

如果您希望取消间隔，您可能只需要将其作为用户调用的自定义方法构建到API中，该方法将停止动画，并调用clearInterval。

Answer 3

有两种可能的解决方案：

A)创建一个标志(有两种方法)

B)创建自定义事件

A-创建标志

1-可以使用添加标志

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

2-如果不想涉及任何属性或任何更改的DOM结构

你可以附加一个默认的旗帜。

通过使用存储任意数据：

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

然后检索它以进行检查

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

至于插件(就像你提到的here)

是的，我们可以从中创建一个：

// 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-创建自定义事件

如果您不想要任何类型或任何类型的标志

你可以创建一个自定义事件，因为'stop‘不是

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'
})

然后使用.trigger()触发该事件：

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