使用 jquery 复制 bing 图片主页效果（淡入，然后淡出）

Posted 2023-02-21

【中文标题】使用 jquery 复制 bing 图片主页效果（淡入，然后淡出）

【英文标题】：replicate bing image homepage effect with jquery (fade in, then fade out)

【发布时间】：2011-06-10 17:08:18

【问题描述】：

所以，我希望能够复制在 bing.com 上看到的效果。当你第一次去那里时，它会加载一个图像背景，然后它会淡入一堆看似随机的盒子，这些盒子会淡入图像。然后，这些框会淡出，表明它们已隐藏，但会为您提供有关其位置的初始指示。

我正在使用 jquery 进行初始淡入，但我想将它延迟一段时间，然后让它淡出。其余效果由 css3 过渡完成。

这是我现在使用的：

<script type="text/javascript">
    $(document).ready(function () 
        $('.floatBtn').hide().fadeIn(1000);
    );

</script>

任何建议和帮助将不胜感激！

【参考方案1】：

您可以在函数调用之间使用.delay() 来做到这一点。 （延迟一段时间。）

所以使用$(document).ready(function () $('.floatBtn').hide().fadeIn(1000).delay(5000).fadeOut(1000); );

【讨论】：

效果很好，你太棒了！