Using Jquery to animate logo in

Vote count: 3

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

http://ift.tt/1Ob28At

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

edited 7 mins ago

jsve
2,719

asked 9 mins ago

onTheInternet
380

2 Answers

Vote count: 4

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://ift.tt/kmaMBU] and set the options

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

answered 6 mins ago

DrCord
1,658

Vote count: 1

You can use fadeOut/fadeIn, slideOut/slideIn of you can create your own animation using animate method in jQuery.

Docs: http://ift.tt/kmaMBU

answered 4 mins ago

Tushar
634

Using Jquery to animate logo in