Using jQuery to animate a logo in

Question

I have text that I want to change for the logo when the user scrolls past a specific point. I already have this job

https://jsfiddle.net/ybh22msj/

The problem is that it just replaces two elements. Actually I need a nice animation. Perhaps the logo appears on top and pushes the text. I am not 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 easy fading 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 parameters

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

Answer 2

fadeOut/fadeIn, .

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

slideOut/slideIn, , .

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

, animate().

Answer 3

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

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

Perhaps this is what you are looking for ?. It uses callbacks so that as soon as it disappears, then the other disappears.

Thank.