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变量。目前，使用插件的所有元素都很常见。

我想到的最简单的方法是使用元素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);

插件中的JQuery .animate（）

1 个答案: