公文包Jquery脚本崩溃页面

portfolio Jquery script crashing page

本文关键字：崩溃 脚本 Jquery 公文包      更新时间：2023-10-02

我正在尝试创建这个有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/

这是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)');

JSFiddle此处

相关文章：