0

I have a menu:

<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>

Each div with number id for a li.

I would like when mouse pointer go over li, its div is shown.

script:

$(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');
    });
});

Look at this

But problem is here that in div's mouseover fadeOut works and hide div. How I can stop fadeout?

4

3 回答 3

2

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

fadeto()

更多信息：

http://api.jquery.com/fadeTo/
于 2013-05-28T13:21:18.617 回答
2 
$('.sub-menu').hover(function(){
        $(this).stop(true,true);
        $(this).css('display', 'block');
    },function(){
         $(this).delay(200).fadeOut('slow');
    });

小提琴

这是针对问题的：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');
    });
});

小提琴

于 2013-05-28T13:22:09.213 回答
1

不太明白这个问题，但这可能会对你有所帮助：jQuery .stop()

于 2013-05-28T13:17:41.900 回答