CODEWITHSUNDEEP
javascriptjquery
onTheInternet
onTheInternet

Reputation: 7253

Using Jquery to animate logo in

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

Upvotes: 4

Views: 1391

Answers (3)

Tushar
Tushar

Reputation: 87203

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().

Upvotes: 1

Ronnie
Ronnie

Reputation: 542

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.

Upvotes: 0

DrCord
DrCord

Reputation: 3955

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

Upvotes: 8

Related Questions