Firefox中的jquery hoverpulse插件問題

Question

我使用hoverpulse插件在鼠標懸停上放大網頁上的圖像。除了Firefox中的一個問題，一切似乎都很好。當我在Firefox上運行該頁面時，只要我加載頁面，我的圖像就會彈出到左上角。我不知道爲什麼會發生。下面是我的插件HTML頁面上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); 

-

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