代码优化，.mouseenter，.css - jQuery

Question

我使用bxslider创建了一个滑块。它看起来像在图片中。一切正常，但如果我尝试使用多个滑块并将鼠标移动到.slider-wrap上几次，那么它就会变得迟钝，这就是为什么我需要让它工作得更快一点。你会怎么写这个函数？

sliderHover=function() {$(".slider-wrap").mouseenter(function(){
        $(this).find(".slide-desc, .slide-desc p, .slide-desc span, .slide-desc h2").css({left:'0'});
        $(this).find(".bx-wrapper").css({'padding-left':'100px'});
    }).mouseleave(function(){
        $(this).find(".slide-desc").css({left:'-200px'});
        $(this).find(".bx-wrapper").css({'padding-left':'0'});
        $(this).find(".slide-desc p, .slide-desc span, .slide-desc h2").css({left:'500px'})}
)}

.slide-desc span, .bx-wrapper, .slide-desc, .slide-desc p, .slide-desc h2 {
    -webkit-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
    -moz-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
    -ms-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1); 
}

@matewka

$("#hide-menu-bg").click(function(e){
    e.preventDefault();
    $('.slider-wrap').unbind('mouseenter mouseleave');
    setTimeout(function(){sliderHover()},1400)
})

忘了写更多细节，对不起。此滑块完全响应，隐藏菜单后，内容区域最大化其大小。上面的点击功能可以防止滑块使用mouseenter - 重要的错误修复。

Answer 1

我建议摆脱所有jQuery并使用CSS :hover

.bx-wrapper {
    padding-left: 0;
}
.slide-desc {
    left: -200px;
}
.slide-desc p, .slide-desc span, .slide-desc h2 {
    left: 500px;
}

.slider-wrap:hover .bx-wrapper {
    padding-left: 100px;
}
.slider-wrap:hover .slide-desc,
.slider-wrap:hover .slide-desc p,
.slider-wrap:hover .slide-desc span,
.slider-wrap:hover .slide-desc h2 {
    left: 0;
}

修改

作为对您的修改的补充，我建议在.slider-wrap添加一个类，而不是:hover

.slider-wrap.hover .bx-wrapper {
    padding-left: 100px;
}
.slider-wrap.hover .slide-desc,
.slider-wrap.hover .slide-desc p,
.slider-wrap.hover .slide-desc span,
.slider-wrap.hover .slide-desc h2 {
    left: 0;
}

然后你的jQuery看起来就像这个

一样简单

var sliderHover = function() {
    $(".slider-wrap").on('mouseenter mouseleave', function(e) {
        $(this).toggleClass('hover', 'mouseenter' == e.type);
    });
};

jQuery.toggleClass方法中的第二个参数确定是应添加还是删除该类。我放了一个逻辑语句，如果事件是true或mouseenter，则返回false。