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

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

您正在为var imgResize的所有孩子img设置$(this).children('.slide-image')。第一次围绕这个只抓取一个图像。但是，您然后克隆该图像并将其添加为该图像的兄弟。下一次，你的函数会将这两个图像分配给var imgResize并将它们克隆/动画它们等等......

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

解决方案？据我所知，只要删除克隆后，它就会被动画化并向后解决所有内容：

$(this).remove();

这将在.animate()函数的mouseleave事件处理程序中的portImage()函数的回调函数中执行，如下所示：

$(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

组合Jquery脚本崩溃页面

1 个答案: