我的jQuery淡入效果不起作用

使用jQuery淡入/淡出效果不起作用。我沒有得到一個錯誤。菜單完美呈現並且可以工作但是，在懸停時沒有延遲或淡入菜單。這裏是工作FIDDLE。我正在使用jQuery 1.9.1。我不想張貼CSS，因爲它太大了，並會佔據一席之地。此外，我認爲這個問題是與jQuery，而不是CSS。我的jQuery淡入效果不起作用

HTML

<ul id="nav"> 
    <li><a href="#">1 HTML</a> 
    </li> 
    <li><a href="#">2 CSS</a> 
    </li> 
    <li><a href="#">3 Javascript </a> 

     <ul> 
      <li><a href="#">3.1 jQuery</a> 

       <ul> 
        <li><a href="#">3.1.1 Download</a> 
        </li> 
        <li><a href="#">3.1.2 Tutorial</a> 
        </li> 
       </ul> 
      </li> 
      <li><a href="#">3.2 Mootools</a> 
      </li> 
      <li><a href="#">3.3 Prototype</a> 
      </li> 
     </ul> 
    </li> 
</ul>

JQUERY

$(document).ready(function() { 
    $(" #nav li").hover(

    function() { 
     $(this).find('ul:first').stop(true, true).delay(1000).fadeIn("slow") 
    }, function() { 
     $(this).find('ul:first').stop(true, true).delay(1000).fadeOut("slow"); 
    } 

    ) 

});

CSS

來源

2013-07-19 AnaMaria

你可以用CSS3轉換來做到這一點。 – Blender

有沒有你的css的延遲：http://jsfiddle.net/balintbako/P9cvk/ –

'.delay（）'方法是最好的排隊jQuery效果之間延遲。更好地使用'setTimeout（）' –

這個CSS部分與您的JS搞亂：

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul { 
    display:none; 
} 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul { 
    display:block; 
}

刪除它（或者只是修改）和你會得到你的延遲。

來源

2013-07-19 09:43:02

只有這個部分搞亂了所有的東西。

工作演示http://jsfiddle.net/cse_tushar/wAhTc/6/

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul { 
    display:block; 
}

來源

2013-07-19 09:48:35

您使用CSS懸停以及爲您的菜單的jQuery懸停效果。你應該只使用其中的一個。以下代碼應該從您的CSS中刪除，以使事情正常工作。

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul { 
    display:none; 
} 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul { 
    display:block; 
}

我建議的另一件事是從您的JS代碼中刪除.delay(100)。您已經在使用.fade('slow')這是爲了達到目的。

來源

2013-07-19 09:50:38 aBhijit

我的jQuery淡入效果不起作用

回答

相關問題