Clever Geek Handbook

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

.

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

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

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

+3


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

Demo

More about jQuery animation queue here

+1


source


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

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


https://jsfiddle.net/o0w4vhb3/

+1


source


I would do it in two steps, mimicking what it .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 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):

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 pointed out in the comments, the animations need to be linear

in order to look smooth.

0


source


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

$('.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>
Run codeHide result


Adjust the duration as needed.

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

0


source


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').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>
Run codeHide result


BONUS - CSS only :

Use opacity

and delay 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;   
}

Good luck!

0


source






More articles:


All Articles