javascript - 组合 Jquery 脚本崩溃页面

Question

我正在尝试创建此作品集页面，其中有 2 列图像。悬停时图像会缩放，下一张图像会被推开以显示标题。

我是 javascript 的新手，我可以使用它，但它在运行几分钟后使我的页面崩溃。我敢肯定这不是以最好的方式写的。有人有反馈吗？

        function portImage() {

        $('.slide').mouseenter(
            function() {
                var imgResize = $(this).children('.slide-image').children('img');
                var current_h = $(this).children('.slide-image').children('img').height();
                var current_w = $(this).children('.slide-image').children('img').width();

                $(imgResize).addClass('active');
                $(imgResize).clone().insertAfter($(imgResize)).addClass('clone');
                $(this).find('.active').removeClass('active');
                $(this).find('.clone').filter(':not(:animated)').animate({
                    width: (current_w * 1.3),
                    height: (current_h * 1.3)
                }, {queue: false, duration: 300});
        }).mouseleave(
            function() {
                var imgResize = $(this).children('.slide-image').children('img');
                var current_h = $(this).children('.slide-image').children('img').height();
                var current_w = $(this).children('.slide-image').children('img').width();

                $(this).find('.clone').filter(':not(:animated)').animate({
                    width: (current_w + 'px'),
                    height: (current_h + 'px')
                }, {queue: false, duration: 300});
        });


    };


        function leftSlide() {
    $('.slide.left').hover(
        function(){
            $(this).next('.slide.right').animate({
                right: "-25%"
            }, 500);
            $(this).children('.slide-caption').animate({
                right: "-50%"
            }, 500);

        },
        function(){
            $(this).next('.slide.right').animate({
                right: "0"
            }, 500);
            $(this).children('.slide-caption').animate({
                right: "0"
            }, 500);
        });
};

function rightSlide() {
    $('.slide.right').hover(
        function(){
            $(this).prev('.slide.left').animate({
                left: "-25%"
            }, 500);
            $(this).children('.slide-caption').animate({
                left: "-50%"
            }, 500);

        },
        function(){
            $(this).prev('.slide.left').animate({
                left: "0"
            }, 500);
            $(this).children('.slide-caption').animate({
                left: "0"
            }, 500);
        });
};

portImage();
rightSlide();
leftSlide();

我在 jsfiddle 上设置了它: https://jsfiddle.net/cuestadesign/jej9xrfq/

Answer 1

这是 portImage() 函数的 mouseenter 事件处理程序中的 .clone() 函数的结果。

您正在为 $(this).children('.slide-image') 的所有子 img 设置 var imgResize .第一次只抓取一张图片。但是，您随后克隆该图像并将其作为同级图像添加到该图像。下一次，您的函数会将两个图像分配给 var imgResize 并克隆它们/为它们制作动画，等等...

这导致被克隆和动画化的图像呈指数级增长，导致仅在几次迭代后页面崩溃。

解决方案？据我所知，只需在克隆动画上下移动后删除克隆即可解决所有问题:

$(this).remove();

这将进入 portImage() 函数的 mouseleave 事件处理程序中 .animate() 函数的回调函数，像这样:

$(this).find('.clone').filter(':not(:animated)').animate({
        width: (current_w + 'px'),
        height: (current_h + 'px')
    }, {queue: false, duration: 300, complete: function() {
        $(this).remove();
    }
});

您可能还想更改 imgResize 的分配以不包含具有 .clone 类的元素:

var imgResize = $(this).children('.slide-image').children('img:not(.clone)');

JSFiddle Here