javascript - 使用 jquery 和 waypoints 插件一个一个地淡入 DIV

Question

使用 waypoints plugin和 jquery 我想延迟显示 3 个 DIV(.circle-1、.circle-2、.circle-3)。一旦 .wrapcircles 在视口(viewport)中(浏览器的可见部分)，触发点就会出现。不幸的是，这不起作用。不确定这是语法错误还是其他原因...感谢您的帮助

 <script type="text/javascript">
$(function() {
       $('.wrapcircles').waypoint(function() {
         $(".circle-1").fadeIn('slow').delay(500);
         $(".circle-2").fadeIn('slow').delay(4000);
         $(".circle-3").fadeIn('slow').delay(8000);
         }, {
           offset: '100%'
         });
    });
</script>

Answer 1

您只需要在 fadeIn() 之前应用 delay()。

$(".circle-1").delay(500).fadeIn('slow');
$(".circle-2").delay(4000).fadeIn('slow');
$(".circle-3").delay(8000).fadeIn('slow');

试试这个 http://jsfiddle.net/k85rz/