使用Jquery为徽标设置动画

Question

我有一些文本，一旦用户滚过某一点，我想换出徽标。 我已经有了这个工作

https://jsfiddle.net/ybh22msj/

问题是它只是交换这两个项目。 我实际上想要一个漂亮的动画。也许徽标从顶部出现并推出文本。 我不确定如何实现这一目标。

JavaScript的

$(document).on('scroll', function() {
    if($(window).scrollTop()> 200) {
        $('#logo2').show();
        $('#logo1').hide();
    }
    else {
        $('#logo2').hide();
        $('#logo1').show();
    }
});

Answer 1

对于简单的淡入淡出，你可以使用

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

要么

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

对于更复杂的动画，您需要使用animate [ http://api.jquery.com/animate/]并设置选项

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

也许这就是你要找的东西？ 它使用回调，一旦淡出，然后另一个淡入。

谢谢。