jQuery Slide menu hover action

Question

ok thing is like this, I got 2 divs, one is my navigation, the other got the same number of li tags with almost same id's as my navigation, those li tags contains a graphic that suppose to slide when hover the nav. Let me explain...

this is my nav

<ul id="navInside">
  <li><a id="nInicio" href="index.php" >Inicio</a></li>
  <li><a id="nHistoria" href="history.php" >Historia</a></li>
  <li><a id="nQuienes" href="aboutus.php" >Quienes somos</a></li>

this is what should move

<ul id="navSlides">
  <li id="SnInicio"></li>
  <li id="SnHistoria"></li>
  <li id="SnQuienes"></li>

This is the jQuery code i got now....

    $('#navInside li').hover(function (){
    $("#S" + this.id).animate({top: '0px'}, 500)}, function (){
    $("#S" + this.id).animate({top: '-70px'}, 500, 'swing');} 
);

Can you help me get the right selector for this to work?

I been stuck for days... Thank you

little things like hunting for an ID that's one level below where you think it is will get you, but Nick's Nailed it. Sometimes I use the "jQuery Selectors" Chrome extension to make sure I am addressing the right element if I get stuck. — Surreal Dreams
– Surreal Dreams, Commented Nov 12, 2010 at 23:42

Nick Craver · Accepted Answer · 2010-11-12 23:34:00Z

3

The id is on the anchor, not the <li> (which this refers to) so your hover should be:

$('#navInside li a').hover(function (){
  $("#S" + this.id).animate({top: '0px'}, 500);
}, function (){
  $("#S" + this.id).animate({top: '-70px'}, 500, 'swing');
});

Or, use the code you have and move the id up to the <li>, like this:

<ul id="navInside">
  <li id="nInicio"><a href="index.php" >Inicio</a></li>
  <li id="nHistoria"><a href="history.php" >Historia</a></li>
  <li id="nQuienes"><a href="aboutus.php" >Quienes somos</a></li>

answered Nov 12, 2010 at 23:34

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

arkjoseph · Accepted Answer · 2011-01-13 22:55:38Z

0

Excuse me, I am unclear as to what $("#S" + this.id) is? I don't see id="S" anywhere else in the html...

answered Jan 13, 2011 at 22:55

arkjoseph

4949 silver badges28 bronze badges

1 Comment

Omegakenshin Over a year ago

Hi, That is because there are to <ul> one with id="navInside", and another with id="navSlides", when hover the navInside <li>'s, then move the slide (in the slide you can use a color box or image or icons to move ^^ really cool... you can check out the final result in www.conelectricas.com

Collectives™ on Stack Overflow

jQuery Slide menu hover action

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related