1

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

4

1 回答 1

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其他，它会返回。

于 2013-11-05T10:28:48.800 回答