alt text

There is a JS code:

$('#navigationa li').hover( function(){ $(this).stop(true).animate({height:'60px'}, 500, 'easeOutBounce') }, function(){ $(this).stop(true).animate({height:'20px'}, 500, 'easeOutCirc') } );

HTML:

 <ul id="navigationa"> <li><a href="#">go go go1</a><img id='lol' src="img/kiska.jpg" alt=""></li> <li><a href="#">go go go2</a><img id='lol' src="img/kiska.jpg" alt=""></li> <li><a href="#">go go go3</a><img id='lol' src="img/kiska.jpg" alt=""></li> <li><a href="#">go go go4</a><img id='lol' src="img/kiska.jpg" alt=""></li> </ul>

When you hover on #navigationa li picture to appear with a block. And it is immediately visible to me. 4 hours puzzled. Tell me how to do it or direct it to the right decision. Thank !

HERE IS A LINK TO EXAMPLE! http://jsfiddle.net/ad8zr/3/

  • four
    Here you are puzzling over the code, but I have been puzzling over your question for a few minutes)) Nothing is clear. Formulate the task in a more understandable language and it would not be bad to put the code on jsfiddle.net . And not only html + js, but also css would not hurt either. - Deonis
  • In img, set css to display: none, and when pointing to {#navigation li} using jQuery, set display: block; - Gena Ant
  • 2
    Why are there jQuery and animate? CSS for what? Pseudo-selector: hover for whom? Who came up with the transition? - Bars
  • This is how $ ('# navigationa li') will not work for you, but $ ('# navigationa li a') may be like this, but only with the first element. But for everything to work, you need to add the data = "" attribute. - bemulima

1 answer 1

Add a rule:

 #navigationa li{ /* ... */ overflow: hidden; }

And correct the pictures

 #navigationa li img { position: relative; top: 5px; }

And here is what we have at the exit . It was necessary to suffer so much? Immediately they would put the code - they would get the answer faster. ))