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

我会这样做：

$('.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);
});

FIDDLE

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

至于使用delay()并使其工作，hide()和show()将作为动画jQuery方法工作，如果传递持续时间的值，即使该值为零

Answer 3

在这里小提琴：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 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);

由于

在循环中显示和隐藏延迟，但没有动画

4 个答案: