1182 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
campolar says

Hi. I’m working on a template and i wanted to add some jquery. Unfortunately its not working how i wanted it to O_o

What do i want?

I basically need the anchor links within a div with an id of x, so move (slide) up 5px.

My code

My HTML is just what is should be.

My css has the anchor tags within that div are positioned relative.

My current jquery code for that is as follows (yes its within the document load function):

$(’#x a’).hover(function() {
$(this).stop().animate({bottom : ‘5px’}, 100);
}, function() {
$(this).stop().animate({top : ‘0’}, 200);
});

The Problem

When i hover over it, it moves up 5px just fine. When i move away from it, it goes back down just fine. But then if i hover over it again, it doesn’t work! :S

PLEASE help!!!

741 posts
  • Has been a member for 5-6 years
  • Sold between 50 000 and 100 000 dollars
  • Exclusive Author
  • Most Wanted Bounty Winner
  • Bought between 50 and 99 items
  • Poland
  • Referred between 10 and 49 users
Orbital_Themes says
Try using “top” or “bottom” in both functions, like this:
$(’#x a’).hover(function() {
$(this).stop().animate({bottom : ‘5px’}, 100);
}, function() {
$(this).stop().animate({bottom : ‘0’}, 200);
});

Also make sure, that the anchor element has the CSS property “bottom” applied to it.

Demo would be useful!

469 posts
  • Author had a File in an Envato Bundle
  • Sold between 250 000 and 1 000 000 dollars
  • Elite Author
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Has been a member for 4-5 years
  • India
+1 more
SaurabhSharma says

Yep. use bottom for both cases.

1182 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
campolar says
Try using “top” or “bottom” in both functions, like this:
$(’#x a’).hover(function() {
$(this).stop().animate({bottom : ‘5px’}, 100);
}, function() {
$(this).stop().animate({bottom : ‘0’}, 200);
});

Also make sure, that the anchor element has the CSS property “bottom” applied to it.

Demo would be useful!

Didn’t i do that? Oh wait, how the hell did i add top in the second function? Damn, must have been the designers’ Satan

Thanks! I can’t figure out how i missed that! Yes, it worked :)

by
by
by
by
by
by