How to run a fadein effect halfway while a div is animating?(moving up)

Question

I want a div to fadeIn while it's animating(moving up), and the fadeIn needs to occur during the final 2 seconds of the animation just as it is completes.

Please note that I don't want it to both fadeIn and animate simultaneously, the fadeIn needs to occur halfway through the animation as the div is moving up.

    $('header').delay(1000).fadeIn(1000)

$('header').animate({ 
    'marginTop': '-=200px'
}, 2000);

The animations are just queued one after the other and I can't get them to work halfway through.

Answer 1

I would run an animate function twice, something like this:

$('#header').animate({
    'marginTop': '-=100px'
}, 1000, function(){ 
    $('#header').animate({
        'marginTop': '-=100px',
        'opacity': 1
    }, 1000)
});

https://jsfiddle.net/o0w4vhb3/

Answer 2

To determine when the animation is at its half, you can use the step-option of the .animate()-function.

A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.

In order to start the second animation (the fadeIn) directly, you have to specify the queue-option of the animation to false or dequeue the different animation manually.

var marginTop = 200;
var flag = false;
$('header').animate({
    'marginTop': '-=' + marginTop  + 'px'
}, {
    queue: false,
    duration: 2000,
    step: function(now){
        if(now <= marginTop/2 && !flag){
            $(this).fadeIn();
            flag = true;
        }
    }
});

Demo

Read more about the jQUery animation-queue here

Answer 3

I would be to do it in two steps, mimicking what .fadeIn() does :

http://codepen.io/anon/pen/wavmBw?editors=011

header {
opacity: 0;
}

$('header')
.animate({marginTop: '-=100'}, 1000, 'linear')
.animate({marginTop: '-=100', opacity: 1}, 1000, 'linear');

Edit - @empiric had a good point in the comments so I've changed the approach a bit to the most direct option. This would have the same result as a fadeIn() (but doesn't seem very necessary) :

http://codepen.io/anon/pen/wavmBw?editors=011

var header = $('header');

header.css({display: 'none', opacity: 0});

// other stuff may be going on first

header
.css('display', 'block')
.animate({marginTop: '-=100'}, 1000, 'linear')
.animate({marginTop: '-=100', opacity: 1}, 1000, 'linear');

Edit - as mentioned in the comments, the animations would need to be linear to appear smooth.

Answer 4

You can run both animation simultaneously by disabling queuing of the first one like this:

$('.header').css('opacity', 0);
$('.header').show();

$('.header').animate({ 'marginTop': '-=200px' }, {queue: false, duration: 2000});
$('.header').animate({opacity: 1}, 3000 );

.header {
    background-color: red;
    padding: 20px;
    display: none;
    margin-top: 250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="header">test</div>

Adjust the durations as needed.

Reference: How do you fadeIn and animate at the same time?

Answer 5

Found!!!

PURE jQuery - fadeIn() + animate()

If you want to use a display:none element and still get the two effects then Simply hide it using jQuery or inline style.

Problems to solve:

• .animate() can't animate the display property - so we use fadeIn.
• .animate() is added to an animation queue- so we set queue: false.

$('div').hide();
$('div').fadeIn(3000).animate({ 'marginTop': '-=200px' }, { queue: false, duration: 2000 });

div { margin-top:200px; background-color:blue; height:50px; width:500px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>

BONUS - only CSS:

Use opacity and delay the animation:

CSS: jsFiddle Demo

#ifade  { 
   margin-top:50px; 
   opacity:0;
   -moz-transition : margin-top 2s linear 0s, opacity 1s linear .6s;   
    -webkit-transition : margin-top 2s linear 0s, opacity 1s linear .6s;   
     transition : margin-top 2s linear 0s, opacity 1s linear .6s;   
}

Have Fun!