CODEWITHSUNDEEP
jqueryjquery-animateslide
Nate Gines
Nate Gines

Reputation: 345

Jquery DIV Animation

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});
                                                    });
});

Upvotes: 0

Views: 1046

Answers (1)

Greg Kramida
Greg Kramida

Reputation: 4244

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.

Upvotes: 1

Related Questions