Can someone help with my menu animation?

[JoshWhiteDesign]

Hi guys, I was hoping someone could point out where I’m going wrong here. I’m trying to learn jQuery from the ground up, so I’m attempting to understand why it does what it does and how to write it properly.

I am going through the Themeforest stuff now and I’m kind of going off the beaten path to do some specific effects. One in particular is a menu.

What I want it to do is to slide the background image (sprite.jpg) up using animate. But what is wrong is that it won’t actually animate. The jquery IS giving it the rollover/hover effect (the image is going up) but it’s not animating the transition.

example of what I’m doing: http://www.citruscreativestudio.com/testcenter/jquerymenu

jquery:

Code:

page

Code:

Home
About
Contact

Thanks in advance!

[cybershot]

is there any reason why you are using animate over slideUp? with the animate, I would try using height instead of positioning. You also need to set a time for the move, otherwise it will move so fast that it will look like the hover. I am not an expert either, not sure this will work, but you could try something like this

"backgroundPosition" : "0px 30px"}, 5000);

add the time on there in miliseconds.

[cybershot]

nope, it don’t work. I can’t figure it out either. If you do figure it out, please make sure to post it because it’s bugging me now. :oops:

[cybershot]

try this article. I think you need to re write all your code. You navigation should be in a list element. That will help. Then I think that maybe you are putting the background on the wrong element. I don’t know. I spent an hour on it myself and can’t figure it out. But try this article by chris. It might help

https://css-tricks.com/garage-door-style … th-jquery/

it’s basically the same code, just set up a little different

[cybershot]

I figured this one out. But yes, you should have your code in a list. that would be the propper way to do it.

change the top to bottom, you can also thin your code. When writing a mouseover, mouseout..You can do it this way

Code:

$(document).ready(function() {
$(‘a.menu’).mouseover(function() {
$(this).stop().animate({ “bottom” : “30px” });
}).mouseout(function() {
$(this).stop().animate({ “bottom” : “0px” });
});
});

[Author]

Posts