CODEWITHSUNDEEP
jqueryhtml
bntrns
bntrns

Reputation: 452

jQuery Animation on Navigation

I'm having troubles with jQuery animation running twice on my navigation bar. Mouse over once causes it to fly down then back up. It won't stay visible. Mousing over twice gives the right effect. Here is how the Nav is set up:

<div id="nav">
<ul>
  <li><a href="en.about.html">About<img src="images/down_arrow.png" alt=""/></a>
    <ul>
      <li><a href="en.accreditations.html">Accreditations</a></li>
      <li><a href="en.partnerships.html">Partnerships</a></li>
      <li><a href="en.labs.html">Laboratories</a></li>
      <li><a href="">Industries</a></li>
      <li><a href="">Photo Gallery</a></li>
    </ul>
   </li>
...
</ul>

SCRIPT:

<script type="text/javascript">
$('body').ready(function() {
$('li').hover(function() {
$(this).find('li').slideToggle(); 
});
});
</script>

Upvotes: 1

Views: 178

Answers (2)

Eran Medan
Eran Medan

Reputation: 45715

Try this in JSFiddle

HTML

<div id="nav" style="width:200px">
<ul style="border:1px solid red">
  <li class="topMenuItem"><a href="en.about.html">About<img src="images/down_arrow.png" alt=""/></a>
    <ul style="display:none">
      <li><a href="en.accreditations.html">Accreditations</a></li>
      <li><a href="en.partnerships.html">Partnerships</a></li>
      <li><a href="en.labs.html">Laboratories</a></li>
      <li><a href="">Industries</a></li>
      <li><a href="">Photo Gallery</a></li>
    </ul>
   </li>
</ul>
</div>

JavaScript ​

$(document).ready(function(){
    $('.topMenuItem').mouseenter(function() {
        $(this).find('ul').slideDown();
    });

    $('.topMenuItem').mouseleave(function(){
        $(this).find('ul').slideUp();
    });
​});

Upvotes: 1

Applehat
Applehat

Reputation: 668

Im assuming this is for a dropdown menu?

I would assume you would want to make the whole list slide, not just a list item.

<script type="text/javascript">

    $(function() {
        $('li').hover(function() {
            $(this).find('ul').slideToggle(); 
        });
    });

</script>

Tho, if you are wanting them to hide on mouse out...

<script type="text/javascript">

    $(function() {
        $('li').mouseenter(function() {
            $(this).find('ul').slideDown(); 
        }).mouseleave(function(){
            $(this).find('ul').slideUp(); 
        });
    });

</script>

Or who knows, I could be completely miss reading your question.

Hopefully this helps.

Upvotes: 1

Related Questions