Question

当用户向下滚动到页面中的特定元素时，我正在尝试播放简短的广告式动画。我们的想法是在页面的特定区域可见时连续循环，最好在不可用时暂停。

到目前为止我所拥有的是：

(function( $ ){
   $.fn.splash = function() {
    $(".lb").fadeIn("slow");
    $(".button").delay(200).fadeIn("slow");
    $(".t1").animate({left:"-=300"},1000);
    $(".t2").delay(500).animate({left:"-=300"},1000);
    $(".t3").delay(1000).animate({left:"-=300"},1000);
    $(".t1").delay(2800).animate({left:"-=400"},400);
    $(".t2").delay(2350).animate({left:"-=400"},400);
    $(".t3").delay(1900).animate({left:"-=400"},400);
    $(".t4").delay(3800).animate({left:"-=300"},1000);
    $(".t5").delay(4000).animate({left:"-=300"},1000);
    $(".t4").delay(3000).animate({left:"-=400"},400);
    $(".t5").delay(2900).animate({left:"-=400"},400);
    $(".t6").delay(7500).animate({left:"-=300"},1000);
    $(".t7").delay(7700).animate({left:"-=300"},1000);
    $(".t6").delay(3000).animate({left:"-=400"},400);
    $(".t7").delay(2900).animate({left:"-=400"},400);
    $(".t8").delay(11500).animate({left:"-=300"},1000);
    $(".t8").delay(5000).animate({left:"-=400"},400);
    $(".arrow").delay(12000).fadeIn(400);
    $(".button").delay(11500).animate({top:"-=30"},700);
    $(".arrow").delay(5000).animate({left:"-=400"},400);
    $(".button").delay(4600).animate({left:"-=400"},400);
    setTimeout(splash(), 18000);
   }; 
})( jQuery );


$(window).scroll(function() {
    if ($('#splash').is(':visible')) {
    $('#splash').splash();
    }
});

当#splash div可见但不循环播放时，会开始播放该函数。我怎样才能让它发挥作用？

（这是否是布置所有动画代码的最佳方式？）

由于

Answer 1

var Interval='';
$(window).scroll(function() {

if ($('#splash').is(':visible')) {
    clearInterval(Interval);
    Interval = setTimeout(function(){
       if($('#splash').is(':visible'))$('#splash').splash();
       else clearInterval(Interval);
    },75);
    }
});

根据需要设定时间（代替75）

在jQuery中循环函数，而元素是可见的

1 个答案: