Using Jquery to animate logo in

Question

I have text that I want to be swapped out for a logo once the user scrolls past a certain point. I already have this working

https://jsfiddle.net/ybh22msj/

The issue is that it just swaps the two items. I actually want a nice animation in. Maybe the logo appearing from the top and pushing out the text. I'm not really sure how to achieve this.

JavaScript

$(document).on('scroll', function() {
    if($(window).scrollTop()> 200) {
        $('#logo2').show();
        $('#logo1').hide();
    }
    else {
        $('#logo2').hide();
        $('#logo1').show();
    }
});

Answer 1

for simple fade you can use

$('#logo2').fadeOut();
$('#logo1').fadeIn();

or

$('#logo2').slideOut();
$('#logo1').slideIn();

for more complex animations you will need to use animate [ http://api.jquery.com/animate/] and set the options

options = {123: 456};
$('#logo2').animate(options);

Answer 2

You can use fadeOut/fadeIn to show the fade effect.

$('#logo2').fadeOut();
$('#logo2').fadeIn();

You can use slideOut/slideIn to show the slide effect that will animate the height of the element.

$('#logo2').slideOut();
$('#logo2').slideIn();

If you want to create your own animation you can use animate() .

Answer 3

https://jsfiddle.net/ybh22msj/1/

$('logo1').fadeOut("slow", function(){ $('#logo2').fadeIn("fast"); });
//and
$('logo2').fadeOut("slow", function(){ $('#logo1').fadeIn("fast"); });

Maybe this is what you are looking for?. It uses callbacks so that once it fades out, then the other one fades in.

Thank You.