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);