Question

我有一个菜单：

<ul>
    <li class='1'>test1</li>
    <li class='2'>test2</li>
    <li class='3'>test3</li>
    <li class='4'>test4</li>
</ul>

<br/>
<div class='clear'></div>

<div id='1' class='sub-menu'>1111111111111</div>
<div id='2' class='sub-menu'>2222222222222</div>
<div id='3' class='sub-menu'>3333333333333</div>
<div id='4' class='sub-menu'>4444444444444</div>

div的每个li，其编号为$(function(){ $('li').hover(function(){ $('.sub-menu').css('display', 'none'); var id = '#' + $(this).attr('class'); $(id).css('display', 'block'); },function(){ $('.sub-menu').delay(200).fadeOut('slow'); }); $('.sub-menu').hover(function(){ $(this).css('display', 'block'); },function(){ $(this).delay(200).fadeOut('slow'); }); });。

我想当鼠标指针移过li时，会显示其div。

脚本：

{{1}}

Look at this

但问题是在div的鼠标悬停中fadeOut工作并隐藏div。我怎么能阻止淡出？

Answer 1

我想你想得到的是div消失，但不会消失，对吧？所以你想要一个

fadeto()

更多信息：

http://api.jquery.com/fadeTo/

Answer 2

$('.sub-menu').hover(function(){
        $(this).stop(true,true);
        $(this).css('display', 'block');
    },function(){
         $(this).delay(200).fadeOut('slow');
    });

Fiddle

这是针对这个问题：div的mouseover fadeOut工作并隐藏div。我怎么能阻止淡出？如果你只是在没有悬停在任何东西上时需要隐藏div，请试试这个：

$(function(){
    $('li').hover(function(){
        $('.sub-menu').stop(true,true);
        $('.sub-menu').css('display', 'none');
        var id = '#' + $(this).attr('class');
        $(id).css('display', 'block');
    },function(){
         $('.sub-menu').fadeOut('slow');
    });

    $('.sub-menu').hover(function(){
        $(this).stop(true,true);
        $(this).css('display', 'block');
    },function(){
         $(this).fadeOut('slow');
    });
});

Fiddle

Answer 3

不完全得到问题，但这可能会对您有所帮助：jQuery .stop()

jQuery - 如何阻止元素淡出

3 个答案: