Question

我正在使用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"/>

有人可以告诉我这里有什么问题吗？

Answer 1

我很确定这是由于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);

Firefox中的jquery hoverpulse插件问题

1 个答案: