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
Thanks in advance!
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.
The only reason I didn’t use slideUp is because I got ZERO results with it. While animate at least got me to the point where it’s loading the images and processing the change via the jQuery, even adding a time to it results in no actual animation. So I’m still stumped.
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
http://css-tricks.com/garage-door-style … th-jquery/
it’s basically the same code, just set up a little different
Ok – so I tried a couple different things… and I’m getting some success.
I changed the menu div to have an overflow:hidden property on it, and then changed the a.menu to include the entire height (60px instead of 30px).
The results are good:
BUT… and this is part of my education and I’m just not familiar with it – can someone help me with how to call back the animation? It’s only letting the animation run once. Is the fact that I’m not using list items hindering this? Or is there some kind of callback function that I’m missing?
Thanks for the link also Cyber – I actually was referencing that first. But the issue I had is that I don’t know enough jQuery to understand what is going on with Chris’ version. I wanted to know what it was doing and why and to code one myself. So hopefully someone can shed some light on the callback function :)
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
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".