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);
    });
};

メソッドの 2 番目のパラメーターはjQuery.toggleClass、クラスを追加するか削除するかを決定します。trueイベントがあったかどうかmouseenterを返す論理ステートメントをそこに置きましたfalse。

于 2013-11-05T10:28:48.800 に答える