Javascript 公文包Jquery脚本崩溃页面

我正在尝试创建这个公文包页面，其中有两列图像。悬停时，图像将缩放，下一幅图像将被推开以显示标题

我是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();

我在JSFIDLE上设置了它：

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

您正在将var imgResize设置为$this.children'.slide image'的所有子项imges。第一次只抓到一张图片。但是，您可以克隆该映像并将其作为同级添加到该映像。下一次，您的函数将把两个图像分配给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)');