javascript - 使用 Jquery 为 Logo 制作动画

Question

一旦用户滚动到某个点，我想将文本换成 Logo 。我已经有了这个工作

https://jsfiddle.net/ybh22msj/

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

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