0

hoverpulse プラグインを使用して、マウスオーバーで Web ページの画像を拡大しています。Firefox の 1 つの問題を除いて、すべてがうまく機能しているようです。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"/>

誰かがここで何が悪いのか教えてもらえますか?

4

1 に答える 1

0

.animate()これは、jQuery 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);
于 2013-11-24T21:44:21.213 に答える