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

我用bxslider制作了一个滑块。它看起来像是在照片里。一切正常，但如果我尝试使用多个滑块并将鼠标移到.slider wrapp上几次，它就会变慢，这就是为什么我需要让它工作得更快一点。您将如何编写此函数

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-重要的错误修复。

我建议去掉所有jQuery并使用CSS

：hover

.bx包装器{
左侧填充：0；
}
.幻灯片说明{
左：-200px；
}
.滑动描述p、.滑动描述跨度、.滑动描述h2{
左：500px；
}
.slider wrap:hover.bx包装器{
左侧填充：100px；
}
.滑块环绕：悬停。滑块描述，
.滑块环绕：悬停。滑块描述p，
.滑块环绕：悬停。滑块描述范围，
.滑块包裹：悬停。滑块描述h2{
左：0；
}

编辑 作为对编辑的补充，我建议在鼠标悬停时将类添加到

.slider wrap

，而不是

：hover

.slider-wrap.hover.bx包装器{
左侧填充：100px；
}
.slider-wrap.hover.slide desc，
.slider-wrap.hover.slide desc p，
.slider-wrap.hover.slide-desc-span，
.slider-wrap.hover.slide desc h2{
左：0；
}

那么您的jQuery看起来可能就这么简单

var sliderHover=function（）{
$（“.slider wrap”）.on（'mouseenter mouseleave'，函数（e）{
$（this.toggleClass（'hover'，'mouseenter'==e.type）；
});
};

---

jQuery.toggleClass

方法中的第二个参数确定是添加还是删除类。如果事件是

mouseenter

或

false

，我会在那里放一个逻辑语句，返回

true

。

我建议去掉所有jQuery，使用CSS

：hover

.bx包装器{
左侧填充：0；
}
.幻灯片说明{
左：-200px；
}
.滑动描述p、.滑动描述跨度、.滑动描述h2{
左：500px；
}
.slider wrap:hover.bx包装器{
左侧填充：100px；
}
.滑块环绕：悬停。滑块描述，
.滑块环绕：悬停。滑块描述p，
.滑块环绕：悬停。滑块描述范围，
.滑块包裹：悬停。滑块描述h2{
左：0；
}

编辑 作为对编辑的补充，我建议在鼠标悬停时将类添加到

.slider wrap

，而不是

：hover

.slider-wrap.hover.bx包装器{
左侧填充：100px；
}
.slider-wrap.hover.slide desc，
.slider-wrap.hover.slide desc p，
.slider-wrap.hover.slide-desc-span，
.slider-wrap.hover.slide desc h2{
左：0；
}

那么您的jQuery看起来可能就这么简单

var sliderHover=function（）{
$（“.slider wrap”）.on（'mouseenter mouseleave'，函数（e）{
$（this.toggleClass（'hover'，'mouseenter'==e.type）；
});
};

---

jQuery.toggleClass

方法中的第二个参数确定是添加还是删除类。我在那里放了一个逻辑语句，如果事件是

mouseenter

或

false

，则返回

true

。无论如何，谢谢你抽出时间，我真的很感激；）我根据你的编辑编辑了我的答案。请看一看。无论如何，谢谢你抽出时间，我真的很感激；）我根据你的编辑编辑了我的答案。请看一看。