10

これは私が現在持っているものです：

$("#cart-summary").mouseenter(function () {
    $('.flycart').delay(500).slideDown('fast');
});
$(".flycart").mouseleave(function () {
    $('.flycart').delay(500).slideUp('fast');
}).find('a.close').click(function(){
   $(this).parents('.flycart').hide();
});

それが何をするか：

マウスオーバーした場合＃cart-summary->500ms後にフライカートを開く

mouseout.flycart->500ms後にflycartを閉じる場合

私が必要なのは：

マウスオーバーした場合＃cart-少なくとも500msの概要->フライカートを開く

少なくとも500msのmouseout.flycartの場合->flycartを閉じる

追加するために編集：ここで使用できる場合は、hoverIntentも使用しますか？

どうもありがとう！

4

5 に答える 5

18

setTimeout を使用して、設定/設定解除したフラグ (私はクラスを使用しています) がまだ有効かどうかを確認します。

$("#cart-summary").mouseenter(function () {
    $("#cart-summary").addClass("hasFocus");
    setTimeout(function(){ 
        if ($("#cart-summary").hasClass("hasFocus")) {
            $('.flycart').slideDown('fast');
        }
      }, 500 );
      });

$("#cart-summary").mouseleave(function () {
    $("#cart-summary").removeClass("hasFocus");
});


$(".flycart").mouseenter(function () {
    $("#cart-summary").removeClass("lostFocus");    
});

$(".flycart").mouseleave(function () {
    $("#cart-summary").addClass("lostFocus");
    setTimeout(function(){ 
        if ($("#cart-summary").hasClass("hasFocus")) { 
            $('.flycart').slideUp('fast');
            }).find('a.close').click(function(){
            $(this).parents('.flycart').hide();
        }
    }, 500)
});
于 2009-10-02T16:36:09.363 に答える
3

HoverIntentプラグインが必要なようです。

ただし、マウスアウトATLEAST 500msで役立つかどうかはわかりません。しかし、そのためのオプションがそこにあるかもしれません。

于 2009-10-02T16:31:42.243 に答える
3

hoverIntentプラグインは次のように使用できます。

var config = {    
     sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
     interval: 500, // number = milliseconds for onMouseOver polling interval    
     timeout: 500, // number = milliseconds delay before onMouseOut    
};

$(".flycart").hoverIntent(function () {
        $('.flycart').slideDown('fast');
}, function() {
        $('.flycart').slideUp('fast');
}).find('a.close').click(function(){
   $(this).parents('.flycart').hide();
});
于 2009-10-02T16:35:19.363 に答える
2

あなたがすることができます：

var timeout,
    $flycart = $(".flycart"),
    $summary = $("#cart-summary"),
    delay = 500;

$summary.mouseenter(function () {
    if (timeout) window.clearTimeout(timeout);
    timeout = window.setTimeout(function(){
        if ( $flycart.is(":visible") ) {
            $flycart.slideDown('fast');
        }
    }, delay);
});
$flycart.mouseleave(function () {
    if (timeout) window.clearTimeout(timeout);
    timeout = window.setTimeout(function(){
        if ( $flycart.is(":visible") ) {
            $flycart.slideUp('fast');
        }
    }, delay);
})...
于 2009-10-02T16:44:45.340 に答える
0

解決策を提供する

var mouseenterTimerCart;
var mouseleaveTimerCart;

$(document).on({
    mouseenter: function () {
        if (mouseleaveTimerCart) clearTimeout(mouseleaveTimerCart);
        mouseenterTimerCart = setTimeout(function() {
            $("#head-cart .cart_items").show()
        }, 500);
    },
    mouseleave: function () {
        if (mouseenterTimerCart) clearTimeout(mouseenterTimerCart);
        mouseleaveTimerCart = setTimeout(function() {
            $("#head-cart .cart_items").hide()
        }, 500);
    }
}, "#head-cart .full, #head-cart .cart_items");

バスケットが動的に更新される場合に機能します

$("#head-cart").html(...crat-html-block...)
于 2015-02-16T20:23:13.877 に答える