Jquery DIV Animation

Question

I am trying to animate my #main div so that it fades out and slides over the top of my #header div when the "Work" think is clicked and then fade out and slide down when either the "About" or "Contact" links are clicked. Something it wrong and it is not animating up. Not sure why. Can anyone help?

http://jsbin.com/odorah/edit#javascript,html,live

I know that ideally a .slideUp/.slideDown function would be in order, but for some reason it interferes with the fittext plugin I am using. Just FYI

$(document).ready(function(){


    $('#workclick').click(function(){
                        $('#main').animate({top:'-50%', opacity:'1'},{queue:false,duration:500, easing:"easeOutQuart"});
                    }, function(){
                        $('#header').animate({top:'0px', opacity:'0'},{queue:false,duration:200});
                    });

                    $('#aboutclick').click(function(){
                                        $('#main').animate({top:'50%', opacity:'0'},{queue:false,duration:500, easing:"easeOutQuart"});
                                    }, function(){
                                        $('#header').animate({top:'0px', opacity:'1'},{queue:false,duration:200});
                                    });
                    $('#contactclick').click(function(){
                                                        $('#main').animate({top:'50%', opacity:'0'},{queue:false,duration:500, easing:"easeOutQuart"});
                                                    }, function(){
                                                        $('#header').animate({top:'0px', opacity:'1'},{queue:false,duration:200});
                                                    });
});

You should always include the relevant code within your question. This way if the file/page you are linking to ceases to exist, your question will still remain and could be useful to others in the future. — James Montagne, Feb 09 '12 at 18:42

score 1 · Accepted Answer · edited May 23 '17 at 09:59

1

Okay, figured out your problem. Replace your first click function with the following:

$('#workclick').click(function(){
    $('#main').animate(
      {top:'-50%', opacity:'1'},
      {
        queue:false,
        duration:500,
        complete:function(){
            $('#header').animate(
              {top:'0px', opacity:'0'},
              {queue:false,duration:200}
            );
        }
      }
    );
});

You can add the transition later. The thing is, JQuery has two forms of the animate function. Both allow you to callback on completion. Here they are:

.animate( properties [, duration] [, easing] [, complete] )
.animate( properties, options )

Source: http://api.jquery.com/animate/

Edit: using the callback or queuing resolves the issue, since JQuery animations are queued. jQuery cannot make synchronous animations, see: https://stackoverflow.com/a/1594085/844728

P.S. you'll have to modify all your calls to .animate, correcting this error.

edited May 23 '17 at 09:59

Community

1
1

answered Feb 09 '12 at 19:49

Greg Kramida

4,064
5
30
46

Wow that did it. Thanks! But It did spark another question. Is there a way to animate the height of the entire #header div, instead of setting a predefined height? My page is based on %s and so the height of the divs change defending upon the screen size. http://jsbin.com/ivewah/2/edit#javascript,html,live – Nate Gines Feb 10 '12 at 00:10
Also when #main animates down there is a jump that occurs in the animation. What causes that? – Nate Gines Feb 10 '12 at 00:11
I fixed the jump that occurs when animating down. I think that probably the best thing would be to animate the #main div to the top of the page. Not sure how to do this. Any ideas? http://jsbin.com/ivewah/5/edit – Nate Gines Feb 10 '12 at 06:59
Let me see if I understand your questions correctly. You're asking how to push the thing up and down independently of the window size, right? You're right in that the problem occurs when you resize the page. It is virtuous of you to try to make everything in %, but for this specific case, you have a header font set in ems and a fixed-pixel-height picture above it. This is the problem. Easiest work-around: simply figure out how much pixels those yield together (em typically is 16px, or just set it in px) and animate #main in pixels instead. Set the header height to that number of pixels too. – Greg Kramida Feb 10 '12 at 14:05
Did I answer your original question? Did I answer your follow-up? – Greg Kramida Feb 15 '12 at 15:25
Yes you did. Thanks for the help. Works like a champ! I just decided to size the header with pixels. – Nate Gines Feb 15 '12 at 19:14

Jquery DIV Animation

1 Answers1