0

私が一緒に仕事をしているデザイナーは、私に取り組むべき機能を少し与えてくれましたが、どのようにアプローチすればよいかわかりません。彼女は基本的に次のことを望んでいます。

  • リンクにカーソルを合わせると、パネルがドロップダウンするはずです（このビットは問題ありません）
  • パネルは10秒後に消えるはずです（これも問題ありません）
  • カーソルがパネル内にある場合、パネルが消えることはありません。カーソルがパネルを離れると、10秒のタイマーが再び開始されます（erm ..）

この3番目の機能を実現する方法を説明するプラグインまたは記事の正しい方向を誰かに教えてもらえますか？私はかなりベテランの開発者ですが、これにアプローチする方法や、グーグルを開始する場所にさえ苦労しています。これが私がこれまでに持っているものです。すべてが機能していますが、その3番目の箇条書きがあります。これを機能させるには、アプローチを完全に変更する必要があるかもしれないと感じています。

function showMiniBasket() {
    $("#basketMiniSummary").slideDown();
}
function hideMiniBasket() {
    $("#basketMiniSummary").fadeOut();
}

var config = {
    over: showMiniBasket, 
    timeout: 10000, 
    out: hideMiniBasket 
};

$("#basketDropDown").hoverIntent(config);

答え...

以下の提案に基づいて、最終的な解決策は...

function showMiniBasket() {
    $("#basketMiniSummary").slideDown("fast");
}

function hideMiniBasket() {
    if (!$('#basketMiniSummary').hasClass('being_hovered')) {
        $("#basketMiniSummary").fadeOut();
    }
}

var config = {
    over: showMiniBasket,
    timeout: 1000,
    out: hideMiniBasket
};

$("#basketDropDown").hoverIntent(config);

$('#basketMiniSummary').hover(function() {
    //hover in
    $(this).addClass('being_hovered');
    $("#basketMiniSummary").slideDown();
}, function() {
    //hover out
    $(this).removeClass('being_hovered');
    $("#basketMiniSummary").delay(1000).fadeOut();        
});
4

1 に答える 1

1

私は次のように$.hoverを使用します：

    $('#the_panel').hover(function () {
        //hover in
        $(this).addClass('being_hovered');
        $("#basketMiniSummary").slideDown();
    }, function () {
        //hover out
        $(this).removeClass('being_hovered');
        setInterval('hideMiniBasket()', 10000);
    });

    //Also hideMiniBasket should be modified
    function hideMiniBasket () {
        if (!$('#the_panel').hasClass('being_hovered')) {
            $("#basketMiniSummary").fadeOut();
        }
    }
于 2012-02-01T17:55:18.660 に答える