javascript - 显示和隐藏循环延迟但没有动画

Question

我有一个 jsfiddle

提琴手

问题是，我正在尝试创建一个脚本，单击一个按钮会在一段时间内打开和关闭图像（车灯）。它工作正常，但在 IE8 中，由于灯光是 png 的，因此它的动画在闪烁时会导致黑色背景和边框。所以我试图复制同样的东西，但不使用动画。

在我的 jsfiddle 中，第一次单击 div 的第一个函数代表我在没有动画的情况下尝试做的事情，但它不会重复。编码：

$('.oneD').click(function(){
  for (var i = 0; i <= 9; i++) {
    $('.oneP').show();
    setTimeout(function(){
        $('.oneP').hide();
    }, 1000);       
  }
});

第二个函数是我已经创建的可以工作的函数，但它有动画：

$('.twoD').click(function(){
for (var i = 0; i <= 9; i++) {              
    $(".twoP").fadeIn(1000, function () {
        $(".twoP").hide();
    });
}   
});

请记住，jsfiddle 只是一个不使用图像的简单模拟。我只是在寻找可以合并它的功能。感谢您抽出宝贵时间帮助我。

Answer 1

而不是setTimeout()使用setInterval()，clearInterval()就像这样：

$('.oneD').click(function(){
    $('.oneP').show();
    var interval = setInterval(function(){
        $('.oneP').hide();
    }, 1000);
    //*after a number of time or loop
    interval.clearInterval();
});

setInterval()“循环”通过函数，它在你传递的每毫秒数中被赋予。并clearInterval()停止“循环”。

Answer 2

在这里小提琴：http: //jsfiddle.net/HxFpr/

    var i;

    $('.twoD').click(function(){
    i = 0;
    loopFlash();  
    });

   function loopFlash(){
       if(i < 10){  // flash 5 times (1 on 1 off = 2 cycles)
        $('.twoP').toggle();   
       var flashing = setTimeout(loopFlash,500);
       }    

   i++;
   }

Answer 3

我会这样做：

$('.oneD, .twoD').on('click', function(){
  for (var i=0; i<9; i++)
      $('.'+this.className.replace('D', 'P')).delay(1000).show(0)
                                             .delay(1000).hide(0);
});

小提琴

这对两个元素和相同的事件处理程序使用了一个选择器，然后在显示和隐藏中将 D 替换为 P。

至于使用delay()和制作这项工作，如果传递了持续时间的值hide()，show()它将像动画 jQuery 方法一样工作，即使该值为零。

Answer 4

为您提供另一种解决方案。

• 无动画 - 单个间隔

• 带动画 - 纯 jQuery

http://jsfiddle.net/x6Kpv/6/

var noAnimationHandler = function() {    
    setInterval(function() {   
        var $el = $('.oneP');
        $el[$el.is(":visible") ? "hide" : "show"]();
    }, 800);
};

var animationHanddler = function() {
    $('.twoP').fadeIn(300, function() {
        $(this).delay(150).fadeOut(300, animationHanddler);
    });
}

$('.oneD').click(noAnimationHandler);
$('.twoD').click(animationHanddler);

谢谢