0

テキストリンク上でマウスのDIVを表示/非表示にする単純なjqueryメニューシステムを書いています。

スライドが発生する前に短い一時停止を実装して、マウスがメニューリンク上を飛んだときにメニューがドロップダウンしないようにします。

これは私が現在メニューをアクティブにする方法です：

<script type="text/javascript"><!--
$('#aboutLink').mouseover(function() {$('#aboutMenu1').slideDown('fast');
$('#aboutLink').css("color", "#ff297b");});
 --></script>

したがって、実際に私が行う必要があるのは、マウスオーバーで、たとえば300ミリ秒待ってから、マウスがリンク上にまだある場合は、アニメーションを実行します。

4

4 に答える 4

1

hoverIntent の使用をお勧めします: http://cherne.net/brian/resources/jquery.hoverIntent.html

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

$(document).ready(function(){
  $('ul#menu > li').hoverIntent(
    // mouseover
    function(){
      $(this).find('>ul').fadeIn('fast');
    },
    // mouseout
    function(){
       $(this).find('>ul').fadeOut('fast');
    }  
  );
});
于 2012-05-23T10:28:02.147 に答える
1

あなたはおそらくそのようなことをしたいと思うでしょう:

var timeout;

$('#aboutLink').mouseover(function() {
    timeout = window.setTimeout(function() {
        $('#aboutMenu1').slideDown('fast');
        $('#aboutLink').css("color", "#ff297b");
    }, 300);
});

$('#aboutLink').mouseout(function() {
    if(timeout) {
        window.clearTimeout(timeout);
    }
});

最初にタイムアウトを設定します。これにより、300 ミリ秒後に指定された関数が実行されますが、ユーザーが div を離れた場合、タイムアウトはクリアされ、何も起こりません。

于 2012-05-23T10:29:38.767 に答える
0 
<script type="text/javascript"><!--
var timeout;
var delay = 300;

$('#aboutLink').hover(function() {
    timeout = setTimeout(function(){
       $('#aboutMenu1').slideDown('fast');
    }, delay);
}, function(){
   if(timeout) clearTimeout(timeout);
});
$('#aboutLink').css("color", "#ff297b");});
--></script>
于 2012-05-23T10:28:18.750 に答える
0

使用するwindow.setTimeout

また、マウス イベントmouseleaveとmouseenter( http://api.jquery.com/mouseenter/を参照) をお勧めします。ネストされた要素を処理する手間を省きます

次に、あなたは持っています

var timeoutId;

$(...).mouseleave(function (ev) { 
    if (timeoutId) { 
        window.clearTimeout(timeoutId);  
    }
    else {
        // either remove the menu or set a similar timeout for disappearance
    }
});

$(...).mouseenter(function (ev) { 
    if (timeoutId) { 
        // clear pending timeouts for other menu items
        window.clearTimeout(timeoutId); 
    }
    else {
        // either remove other menus or transition them out
    }

    timeoutId = window.setTimeout(function () {
        // show menu
    }, 300); 
});

このようにすると、常に現在の要素を見ているので、単純なロジックになります。タイムアウトをクリアするmouseenterと、他の要素を処理する必要がなくなります。

もちろん、個々のメニューエントリごとにいじくり回してタイムアウトを設定することもできます。これにより、より良いトランジションが得られます。しかし、より複雑なものを管理する必要があります。

于 2012-05-23T10:34:58.490 に答える