重新啓動動畫後，它通過

我有3個箭頭圖標在我的呼籲行動，一個接一個從不透明度0到不透明度1淡入。一切工作正常，但我想要做的是一旦所有3個箭頭圖標已經淡入，我想把它們全部設置回不透明度0並重新開始一個循環。我被困在如何重新啓動它。任何幫助，將不勝感激。這裏是我到目前爲止讓動畫工作一次的代碼。重新啓動動畫後，它通過

$('.cta-icon').each(function(i, el) { 
setTimeout(function() { 
    $(el).css('opacity', '1'); 
}, i * 1000); 
});

來源

2016-02-09 Taylor Foster

嘗試使用setInterval，並使用fadeIn和fadeOut鏈接在一起。

var interval; 
$('.cta-icon').each(function(i, el) { 
interval = setInterval(function() { 
    $(el).fadeIn(function() { 
    $(this).fadeOut(); 
    }); 
}, 1000); 
}); 
... 
clearInterval(interval) //stop the interval

來源

2016-02-09 21:30:41

如果你只是想動畫的按鈕，你爲什麼不通過CSS做呢？沒有JS需要這個：

.blink_me { 
    animation: blinker 2s linear infinite; 
} 

@keyframes blinker { 
    50% { opacity: 0.0; } 
}

將每秒混合元素進出。如果你更喜歡jQuery的方式，你可以去animate。

$().ready(function() { 
    var _fadeIn = function() { 
     $(this).animate({'opacity':1},1000, _fadeOut); 
    }, 
    _fadeOut = function() { 
     $(this).animate({'opacity':0},1000, _fadeIn); 
    }; 
    $('.cta-icon').each(_fadeOut); 
});

您會找到一個小例子here。

來源

2016-02-09 21:46:42

重新啓動動畫後，它通過

回答

相關問題