jquery - 插件中的 JQuery .animate()

Question

我创建了这个插件，但是当我在 2 个不同的选择器上使用它时：$('.1').Breath()它$('.2').Breath()不能正常工作，当我在其中一个选择器上停止它时：$('.1').BreathStop()所有选择器的动画都会停止。我不知道是什么问题

(function($) {
  var breathing;
  $.fn.Breath = function() {

    var options = $.extend({
      minOpacity: 0,
      maxOpacity: 1,
      BreathIn  : 1000,
      BreathOut : 3000
    }, arguments[0]);

    return this.each(function() {
      breathing = true;
      var obj = $(this);
      function breath() {
        if(stop()) return;
        obj.stop().animate({
          opacity: options.minOpacity
        }, options.BreathOut, function() {
          if(stop()) return;
          obj.stop().animate({
            opacity: options.maxOpacity
          }, options.BreathIn, function() {
            if(stop()) return;
            obj.stop();
            breath();
          });
        });
      }

      breath();

      function stop() {
        if(!breathing)
          obj.stop().css({opacity: 1});
        return !breathing;
      }
    });
  }

  $.fn.BreathStop = function() {
    breathing = false;
  }

})(jQuery);

有什么解决办法吗？

Answer 1

您需要“本地化”您的breathing变量。目前，使用您的插件的所有元素都很常见。

我想到的最简单的方法是使用 element's data：

(function($) {

    $.fn.Breath = function() {

        var options = $.extend({
            minOpacity: 0,
            maxOpacity: 1,
            BreathIn: 1000,
            BreathOut: 3000
        }, arguments[0]);
        return this.each(function() {
            var obj = $(this);
            obj.data("breathing", true);

            function breath() {
                if (stop()) return;
                obj.stop().animate({
                    opacity: options.minOpacity
                }, options.BreathOut, function() {
                    if (stop()) return;
                    obj.stop().animate({
                        opacity: options.maxOpacity
                    }, options.BreathIn, function() {
                        if (stop()) return;
                        obj.stop();
                        breath();
                    });
                });
            }
            breath();

            function stop() {
                if (!obj.data("breathing")) obj.stop().css({
                    opacity: 1
                });
                return !obj.data("breathing");
            }
        });
    }
    $.fn.BreathStop = function() {
        this.each(function() {
            $(this).data("breathing", false);
        });
    }
})(jQuery);