jquery - 如何在 Jquery 放大镜中添加淡入淡出

Question

我对 jquery 完全陌生，并决定使用下面的放大镜。我已经设法让它启动并工作，但我想在脚本中添加一个简单的淡入和淡出。任何想法我放置它的位置和方式。我尝试了几件事但失败了。任何建议表示赞赏。非常感谢 GK

    /**
    * loupe - an image magnifier for jQuery
    * (C) 2010 jdbartlett, MIT license
    * http://github.com/jdbartlett/loupe
    */

    (function ($) {
$.fn.loupe = function (arg) {
    var options = $.extend({
        loupe: 'loupe',
        width: 200,
        height: 150
    }, arg || {});

    return this.length ? this.each(function () {
        var $this = $(this), $big, $loupe,
            $small = $this.is('img') ? $this : $this.find('img:first'),
            move, hide = function () { $loupe.hide(); },
            time;

        if ($this.data('loupe') != null) {
            return $this.data('loupe', arg);
        }           

        move = function (e) {
            var os = $small.offset(),
                sW = $small.outerWidth(),
                sH = $small.outerHeight(),
                oW = options.width / 2,
                oH = options.height / 2;

            if (!$this.data('loupe') ||
                e.pageX > sW + os.left + 10 || e.pageX < os.left - 10 ||
                e.pageY > sH + os.top + 10 || e.pageY < os.top - 10) {
                return hide();
            }

            time = time ? clearTimeout(time) : 0;

            $loupe.show().css({
                left: e.pageX - oW,
                top: e.pageY - oH
            });
            $big.css({
                left: -(((e.pageX - os.left) / sW) * $big.width() - oW)|0,
                top: -(((e.pageY - os.top) / sH) * $big.height() - oH)|0
            });
        };

        $loupe = $('<div />')
            .addClass(options.loupe)
            .css({
                width: options.width,
                height: options.height,
                position: 'absolute',
                overflow: 'hidden'
            })
            .append($big = $('<img />').attr('src', $this.attr($this.is('img') ? 'src' : 'href')).css('position', 'absolute'))
            .mousemove(move)
            .hide()
            .appendTo('body');

        $this.data('loupe', true)
            .mouseenter(move)
            .mouseout(function () {
                time = setTimeout(hide, 10);
            });
    }) : this;
};
    }(jQuery));

Answer 1

更换应该工作$loupe.show()。$loupe.fadeIn()还要寻找 $loupe.hide() 并将 hide 替换为.fadeOut(). 即使从未见过放大镜插件工作，代码也不是很复杂，你应该修改它并将其用作学习实验，以更好地了解 jQuery 是如何工作的。

Answer 2

对代码的这个小编辑应该可以满足您的需求

Javascript：

  (function ($) {
    $.fn.loupe = function (arg) {
        var options = $.extend({
            loupe: 'loupe',
            width: 200,
            height: 150
        }, arg || {});

        return this.length ? this.each(function () {
            var $this = $(this), $big, $loupe,
                $small = $this.is('img') ? $this : $this.find('img:first'),
                move, hide = function () { $loupe.fadeOut(); },
                time;

            if ($this.data('loupe') != null) {
                return $this.data('loupe', arg);
            }           

            move = function (e) {
                var os = $small.offset(),
                    sW = $small.outerWidth(),
                    sH = $small.outerHeight(),
                    oW = options.width / 2,
                    oH = options.height / 2;

                if (!$this.data('loupe') ||
                    e.pageX > sW + os.left + 10 || e.pageX < os.left - 10 ||
                    e.pageY > sH + os.top + 10 || e.pageY < os.top - 10) {
                    return hide();
                }

                time = time ? clearTimeout(time) : 0;

                $loupe.fadeIn().css({
                    left: e.pageX - oW,
                    top: e.pageY - oH
                });
                $big.css({
                    left: -(((e.pageX - os.left) / sW) * $big.width() - oW)|0,
                    top: -(((e.pageY - os.top) / sH) * $big.height() - oH)|0
                });
            };

            $loupe = $('<div />')
                .addClass(options.loupe)
                .css({
                    width: options.width,
                    height: options.height,
                    position: 'absolute',
                    overflow: 'hidden'
                })
                .append($big = $('<img />').attr('src', $this.attr($this.is('img') ? 'src' : 'href')).css('position', 'absolute'))
                .mousemove(move)
                .hide()
                .appendTo('body');

            $this.data('loupe', true)
                .mouseenter(move)
                .mouseout(function () {
                    time = setTimeout(hide, 10);
                });
        }) : this;
    };
  }(jQuery));