Jquery以简单的方式交叉淡入淡出动画

Question

我正在制作旋转横幅。一切都很好，但是当横幅旋转时我无法获得干净的动画。

我在jQuery上相当新，所以至少可以说我有点新鲜。

好的，所以横幅使用以下代码淡出和淡入新图像

$(image).fadeOut(100);
$(image).fadeIn(100);

淡出并变白并持续一秒钟，然后新图像淡入。

我确信有一种方法可以无缝地完成这项工作，但我似乎无法理解这里的概念。我不想去插件，因为这个标题非常简单，我根本不想让事情复杂化。

Answer 1

$(image).fadeOut(100, function(){ 
    $(this).fadeIn(100); 
});

使用fadeOut动画调用的回调来运行新的淡入淡出，以便遵循正确的顺序。

http://api.jquery.com/fadeOut/

Answer 2

• 使用绝对定位将一张图像放在另一张图像上
• 淡出顶部图像
• 将隐藏的顶部图像的来源更改为底部图像
• 将顶部图像的不透明度更改为100％

你可以使用旧版浏览器的jQuery动画和普通版本的CSS转换 - 这样，由于硬件加速，它在iOS上看起来很流畅，而不是生涩和可怕。

Answer 3

如果这正是您正在寻找的Here

，那么交叉渐变的好例子

Answer 4

我认为您的图片有ID？

如果是这样，你应该改变

$(image).fadeOut(100);
$(image).fadeIn(100);

到

$("#image").fadeOut(100);
$("#image").fadeIn(100);

'＃'告诉脚本查看带有id图像的元素