2

次のjQueryコードがあります（ここの別の質問から取得）：

$(document).ready(function(){
    $("#profile_dropdown").mouseenter(function(){
        clearTimeout($(this).data('timeoutId'));
        $("#profile_dropdown_content").fadeIn("slow");
    }).mouseleave(function(){
        var someElement = $("#profile_dropdown");
        var timeoutId = setTimeout(function(){
            $("#profile_dropdown_content").fadeOut("slow");
        }, 650);
        //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
        someElement.data('timeoutId', timeoutId); 
    });
});

#profile_dropdown_contentただし、期待どおりに機能します-マウスを上に移動した場合に表示を維持する方法がわかりません。そして、マウスがコース外に移動した場合にフェードアウトさせる方法...

何か案は？

4

2 に答える 2

2

要素を別の要素でラップしてから、関数と関数をラッパーにdivバインドします。mouseentermouseleave

モック HTML

<div id="profile_wrapper">
    <div id="profile_dropdown">Profile Dropdown</div>
    <div id="profile_dropdown_content">This is some information about me.  I write code all day long.</div>
</div>

Javascript

$(document).ready(function(){
    $("#profile_wrapper").mouseenter(function(){
        clearTimeout($(this).data('timeoutId'));
        $("#profile_dropdown_content").fadeIn("slow");
    }).mouseleave(function(){
        var someElement = $("#profile_dropdown");
        var timeoutId = setTimeout(function(){
            $("#profile_dropdown_content").fadeOut("slow");
        }, 650);
        //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
        someElement.data('timeoutId', timeoutId);
    });
});

http://jsfiddle.net/H7Hvf/1/

于 2012-12-14T17:50:12.217 に答える
2

#profile_dropdown_contentコンテナー内にネストし#profile_dropdown、ホバー イベントを使用します。

jsfiddle: http://jsfiddle.net/UsWYq/1/

JS

$(document).ready(function(){
    $("#profile_dropdown").hover(function(){
        clearTimeout($(this).data('timeoutId'));
        $("#profile_dropdown_content").fadeIn("slow");
    }, function(){
        var someElement = $("#profile_dropdown");
        var timeoutId = setTimeout(function(){
            $("#profile_dropdown_content").fadeOut("slow");
        }, 650);
        //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
        someElement.data('timeoutId', timeoutId); 
    });
});

HTML

<div id="profile_dropdown">
    <div class="inner">Hover Me</div>
    <div id="profile_dropdown_content">Display Me</div>
</div>
<div id="profile_dropdown"></div>

CSS

#profile_dropdown {
    background:whitesmoke;
    float:left;
}
#profile_dropdown .inner {
    height:100px;
    width:100px;
}
#profile_dropdown_content {
    display:none;
    background:red;
    height:100px;
    width:100px;
}

オプション 2

他にできることは、CSS3 トランジションです: http://jsfiddle.net/Ezxm5/

#profile_dropdown {
    background:whitesmoke;
    float:left;
}
#profile_dropdown:hover #profile_dropdown_content {
    display:block;
    opacity:1;
    height:100px;
}
#profile_dropdown .inner {
    height:100px;
    width:100px;
}
#profile_dropdown_content {
    opacity:0;
    background:red;
    height:0;
    width:100px;
    overflow:hidden;
    -webkit-transition: opacity 0.4s ease-in, height 0.4s ease-out;
    -moz-transition: opacity 0.4s ease-in, height 0.4s ease-out;
    -ms-transition: opacity 0.4s ease-in, height 0.4s ease-out;
    -o-transition: opacity 0.4s ease-in, height 0.4s ease-out;
    transition: opacity 0.4s ease-in, height 0.4s ease-out;
}​
​
于 2012-12-14T17:42:00.503 に答える