Grow your CSS skills. Land your dream job.

Can someone help with my menu animation?

  • # December 24, 2009 at 12:42 am

    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

    Thanks in advance!

    # December 24, 2009 at 12:58 am

    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.

    # December 24, 2009 at 1:37 am

    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:

    # December 25, 2009 at 1:33 am

    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.

    # December 25, 2009 at 2:14 am

    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

    # December 25, 2009 at 2:23 am

    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:

    http://www.citruscreativestudio.com/testcenter/jquerymenu

    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 :)

    # December 25, 2009 at 2:45 am

    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” });
    });
    });
    # December 25, 2009 at 3:43 pm

    Awesome thanks… I also didn’t realize about the way to do the code thinning like you show. Thanks for the tip! One of these days I’ll be able to make cool garagedoor menus and stuff from scratch :)

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".