javascript - 使用Jquery对徽标进行动画处理

我有一些文字，一旦用户滚动到某个点，我想将其换成徽标。我已经有这个工作了

https://jsfiddle.net/ybh22msj/

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

JavaScript

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

最佳答案

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

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

要么

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

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

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