4

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

3 Answers 3

8

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

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

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.