Javascript Firefox中的jquery hoverpulse插件问题

我使用鼠标悬停脉冲插件在我的网页上放大图像。除了Firefox中的一个问题外，其他一切似乎都很好。当我在firefox上运行页面时，我的图像会在加载页面后立即弹出到左上角。我不知道为什么会这样。下面是插件JS

(function($) {

$.fn.hoverpulse = function(options) {
    // in 1.3+ we can fix mistakes with the ready state
    if (this.length == 0) {
        if (!$.isReady && this.selector) {
            var s = this.selector, c = this.context;
            $(function() {
                $(s,c).hoverpulse(options);
            });
        }
        return this;
    }
    var opts = $.extend({}, $.fn.hoverpulse.defaults, options);

    // if not modified size_y is same as size
    opts.size_y = opts.size_y || opts.size;
    // parent must be relatively positioned
    this.parent().css({ position: 'relative' });
    // pulsing element must be absolutely positioned
    this.css({ position: 'absolute', top: 0, left: 0 });

    this.each(function() {
        var $this = $(this);
        var w = $this.width(), h = $this.height();
        $this.data('hoverpulse.size', { w: parseInt(w), h: parseInt(h) });
    });
    // bind hover event for behavior
    return this.hover(
        // hover over
        function() {
            var $this = $(this);
            $this.parent().css('z-index', opts.zIndexActive);

            var size = $this.data('hoverpulse.size');
            var w = size.w, h = size.h;
            $this.stop().animate({
                top:  ('-'+opts.size_y+'px'),
                left: ('-'+opts.size+'px'),
                height: (h+2*opts.size_y)+'px',
                width:  (w+2*opts.size)+'px'
            }, opts.speed, opts.over);
        },
        // hover out
        function() {
            var $this = $(this);
            var size = $this.data('hoverpulse.size');
            var w = size.w, h = size.h;

            $this.stop().animate({
                top:  0,
                left: 0,
                height: (h+'px'),
                width:  (w+'px')
            }, opts.speed, function() {
                $this.parent().css('z-index', opts.zIndexNormal);
                opts.out.call(this);
            });
        }
    );
};

$.fn.hoverpulse.defaults = {
    size:  20,
    size_y: 0,
    speed: 200,
    zIndexActive: 100,
    zIndexNormal: 1,
    over: $.noop || function() {},
    out: $.noop || function() {}
};

})(jQuery);

在我的html页面上-

$(document).ready(function() {
    $('.hoverImage').hoverpulse().each(function() {
        var $img = $(this);
        var link = $img.attr('data-link');
        $img.attr('title','Click to open in a new window');
        $img.click(function() {
            window.open(link);
            return false;
        });
    });
});
<img class="hoverImage" src="\p1.jpg" height="10px" width="10px" data-link="\p1.jpg"/>

$（文档）.ready（函数（）{
$（'.hoverImage'）.hoverpulse（）.each（function（））{
var$img=$（本）；
var-link=$img.attr（'data-link'）；
$img.attr（'title'，'Click to open in a new window'）；
$img.单击（函数（）{
窗口。打开（链接）；
返回false；
});
});
});

---

有人能告诉我这里出了什么问题吗？

我很确定这是由于jQuery

.animate（）

API中发生了重大更改。Hoverpulse使用

'+42px'

样式值而不是

'+=42px'

样式设置动画。尝试此插件的修补版本：

/*
 * jQuery HoverPulse Plugin by M. Alsup
 * Examples and docs at: http://malsup.com/jquery/hoverpulse/
 * Dual licensed under the MIT and GPL
 * Requires: jQuery v1.2.6 or later
 * @version: 1.01  26-FEB-2009
 *
 * Patched to work with jQuery 1.10
 */
(function($) {

$.fn.hoverpulse = function(options) {
    // in 1.3+ we can fix mistakes with the ready state
    if (this.length == 0) {
        if (!$.isReady && this.selector) {
            var s = this.selector, c = this.context;
            $(function() {
                $(s,c).hoverpulse(options);
            });
        }
        return this;
    }    

  var opts = $.extend({}, $.fn.hoverpulse.defaults, options);

  // parent must be relatively positioned
  this.parent().css({ position: 'relative' });
  // pulsing element must be absolutely positioned
  this.css({ position: 'absolute', top: 0, left: 0 });

  this.each(function() {
    var $this = $(this);
    var w = $this.width(), h = $this.height();
    $this.data('hoverpulse.size', { w: parseInt(w), h: parseInt(h) });
  });

  // bind hover event for behavior
  return this.hover(
    // hover over
    function() {
      var $this = $(this);
      $this.parent().css('z-index', opts.zIndexActive);

      var size = $this.data('hoverpulse.size');
      var w = size.w, h = size.h;
      $this.stop().animate({ 
        top:  ('-='+opts.size+'px'), 
        left: ('-='+opts.size+'px'), 
        height: (h+2*opts.size)+'px', 
        width:  (w+2*opts.size)+'px' 
      }, opts.speed);
    },
    // hover out
    function() {
      var $this = $(this);
      var size = $this.data('hoverpulse.size');
      var w = size.w, h = size.h;

      $this.stop().animate({ 
        top:  0, 
        left: 0, 
        height: (h+'px'), 
        width:  (w+'px') 
      }, opts.speed, function() {
        $this.parent().css('z-index', opts.zIndexNormal);
      });
    }
  );
};

$.fn.hoverpulse.defaults = {
  size:  20,
  speed: 200,
  zIndexActive: 100,
  zIndexNormal: 1
};

})(jQuery);