CODEWITHSUNDEEP
jquerycsstransition
Dafydd Thomas
Dafydd Thomas

Reputation: 17

Moving elements with jQuery - Fade out then in?

I've got my site set up so that the centered nav sits above the h1 title of my site. I then scroll down and the h1 moves to the left of the nav, while the nav aligns right.

I move the elements using jQuery and adding classes to elements. How would I go about making the h1 fade out and then in next to the nav like in the second picture? I've tried CSS transition ease-in-out thing but it seems to just move fast behind the nav, then appears in front.

Any suggestions?

Thanks.

Upvotes: 0

Views: 1272

Answers (3)

leoinfo
leoinfo

Reputation: 8195

See here an example of fadeout-move-fadein

http://jsfiddle.net/atk49os1/

<div id=box1>
    aaa
    <span>zzz</span>
</div>
<div id=box2>
    bbb
</div>
$(document).ready(function(){
    $('span').fadeOut('slow',function(){
        $('#box2').append($(this).fadeIn('slow'));
    })
});

EDIT:

I added a button to thigger the "move"

http://jsfiddle.net/zxfneqqt/

Upvotes: 0

sticksu
sticksu

Reputation: 3738

If I understood what you really want you can do it like this. 

$(selector).fadeOut(500, function(){
  // Move the element as you wish
  $(selector).fadeIn();
});

Upvotes: 0

Tobias M&#252;hl
Tobias M&#252;hl

Reputation: 2058

For me it looks like you are having trouble with the asynchronous nature of JavaScript. If you want one animation to follow another you can't do this:

$(selector).animate(...);
$(selector).animate(...);

Both animations will execute at the same time. Instead you need to make use of the Callback parameter jQuery offers.

If you look at the API you will see that you can define a function to run when the animation has completed.

$(selector).animate( {properties} , duration , easing , complete );

For complete you pass a function containing the next animation.

$(selector).animate( {properties} , duration , easing , function() {
    $(selector).animate( {properties} );
});

More info on the animate() API

Upvotes: 1

Related Questions