jquery中的fadein淡出效果

Question

我正在使用下面的代碼來淡化菜單的淡出效果。

目前它正在為鼠標懸停菜單提供淡入淡出效果。 請點擊以下鏈接http://www.queness.com/resources/html/fadein/index.html

但我的要求是，當我在特定菜單上鼠標懸停時，所有其他菜單應該獲得淡入淡出效果，但不是懸停菜單（懸停菜單不會產生任何效果）。

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>

<script type="text/javascript">    
//<![CDATA[   
$(document).ready(function () {    
    //Append a div with hover class to all the LI
    $('#navMenu li').append('<div class="hover"><\/div>');
    $('#navMenu li').hover(     
        //Mouseover, fadeIn the hidden hover class  
        function() {            
            $(this).children('div').stop(true, true).fadeIn('1000');    
        }, 
            //Mouseout, fadeOut the hover class
        function() {

            $(this).children('div').stop(true, true).fadeOut('1000');   
    });    
});    
//]]>
</script>    
<style type="text/css">    
body {
    background:#222;    
}

#navMenu {
    margin:0; 
    padding:0;
    list-style:none;    
    font-family:arial;
    text-align:center;
    line-height:60px;
}

    #navMenu li {
        float:left; 
        background:url(default.jpg) no-repeat center center;    /* default background image */
        width:120px;                            /* width and height of the menu item */
        height:70px;
        border-left:1px solid #111;             /* simulate pixel perfect using border */
        border-right:1px solid #333;
        border-top:1px solid #555;
        border-bottom:1px solid #333;
        position:relative;          /* must set it as relative, because .hover class top and left with absolute position will be positioned according to li.    */
    }

    #navMenu li a {z-index:20;      /* z-index must be higher than .hover class */
        display:block;  /* display as block and set the height according to the height of the menu to make the whole LI clickable   */
        height:70px;
        position:relative;
        color:#777;
    }

    #navMenu li .hover {
        background:url(over.jpg) no-repeat center center;       /* mouseover image  */
        position:absolute;  /* must be postion absolute     */
        width:120px;    /*  width, height, left and top to fill the whole LI item   */
        height:70px;
        left:0; 
        top:0;  
        z-index:0;      /* display under the Anchor tag */
        display:none;   /* hide it by default   */
    }   

    #navMenu li.selected {
        background:url(selected.jpg) no-repeat center center;   /* selected image   */
    }


</style>
</head>
<body>

<ul id="navMenu">
    <li><a href="#">Test 1</a></li>
    <li><a href="#">Test 2</a></li>
    <li><a href="#">Test 3</a></li>
    <li><a href="#">Test 4</a></li>
    <li><a href="#">Test 5</a></li>
    <li><a href="#">Test 6</a></li>
</ul>


</body>
</html>

Answer 1

使用兄弟姐妹：

$(this).siblings().each(function() {
  // Code to run for each sibling.
});

Answer 2

試試這個代碼......

$('#navMenu li').append('<div class="hover"><\/div>');
    $('#navMenu li').hover(     
        //Mouseover, fadeIn the hidden hover class  
        function() {            
             $('#navMenu li div').stop(true, true).fadeIn('1000');
            $(this).children('div').css("display", "none");    
        }, 
            //Mouseout, fadeOut the hover class
        function() {

            $('#navMenu li div').fadeOut('1000');   
    });

jquery中的fadein淡出效果

問題描述

2 個解決方案

解決方案1
2 2012-01-23 06:24:43

解決方案2
0 已采納 2012-01-23 06:50:14

jquery中的fadein淡出效果

問題描述

2 個解決方案

解決方案1 2 2012-01-23 06:24:43

解決方案2 0 已采納 2012-01-23 06:50:14

解決方案1
2 2012-01-23 06:24:43

解決方案2
0 已采納 2012-01-23 06:50:14