How do I fade the effect halfway through while the div animates? (Moving up)

I want div

to fadeIn

while it animates (moving up) and fadeIn

should appear in the last 2 seconds of the animation just as it finishes.

Please note that I do not want it to be at the same time fadeIn

and animate

, fadeIn

should occur halfway through the animation as you go div



    'marginTop': '-=200px'
}, 2000);


The animations are just queued up one by one and I can't seem to get them to work halfway through.


source to share

5 answers

To determine when an animation is in its half, you can use the .animate()

-function option .

A function to call for each animated property of each animated element. This function makes it possible to modify a Tween object to change the value of the property before setting it.

To start the second animation ( fadeIn

) directly, you must specify the queue

animation option to false

or dequeue various animations manually.

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



More about jQuery animation queue here



I would run the animation function twice, something like this:

    'marginTop': '-=100px'
}, 1000, function(){ 
        'marginTop': '-=100px',
        'opacity': 1
    }, 1000)



I would do it in two steps, mimicking what it .fadeIn()


header {
opacity: 0;


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


Edit - @empiric had a good point in the comments, so I changed my approach a bit to the most straight forward option. This will have the same result as fadeIn()

(but doesn't seem very necessary):

var header = $('header');

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

// other stuff may be going on first

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


Edit - as pointed out in the comments, the animations need to be linear

in order to look smooth.



You can run both animations at the same time by disabling the first type of sequence:

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

$('.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=""></script>
<div class="header">test</div>

Run codeHide result

Adjust the duration as needed.

Link: How can you both revive at the same time?



Found !!!

PURE jQuery - fadeIn () + animate ()

If you want to use an element display:none

and still get two effects then Just hide it with jQuery

or inline style.

Problems to solve:

  • .animate()

    cannot animate the display property, so we use fadeIn

  • .animate()

    is added to the animation queue, so we set queue: false


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

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

<script src=""></script>

Run codeHide result

BONUS - CSS only :

Use opacity

and delay animation:

CSS: jsFiddle Demo

#ifade  { 
   -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;   


Good luck!



All Articles