Question

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

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

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

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

谢谢。

使用Jquery为徽标设置动画

3 个答案: