jQuery fadeIn then fadeOut text from innerHTML not working
jQuery fadeIn then fadeOut text from innerHTML not working
提问于 2020-06-30 16:01:57
我有一个jQuery函数，可以逐个淡入淡出文本。然而，由于我放置了来自jQuery的文本，该函数不能正常工作。当我尝试运行它时，它只显示0。未显示到4的1。
var html = '<div id="main">';
for (var i = 0; i < 5; i++) {
html += '<div class="trip">' + i + '<div>';
}
html += '</div>';
document.getElementById('todayPrayTime').innerHTML = html;
var $elem = $('#main .trip'),
l = $elem.length,
i = 0;
function go() {
$elem.eq(i % l).fadeIn(700, function() {
$elem.eq(i % l).fadeOut(700, go);
i++;
})
}
go().trip {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="todayPrayTime"></div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-06-30 16:22:29
var html = '<div id="main">';
for (var i = 0; i < 5; i++) {
html += '<div class="trip">' + i + '</div>';
}
html += '</div>';
document.getElementById('todayPrayTime').innerHTML = html;
function go($list, i) {
var l = $list.length, $trip = $list.eq(i % l);
$trip.show().fadeIn(700, function(){
$trip.fadeOut(700, function(){
$trip.hide();
if ( ++i < l ) go($list, i);
});
})
}
go($('#main .trip'), 0).trip {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="todayPrayTime"></div>
var html = '<div id="main">';
for (var i = 0; i < 5; i++) {
html += '<div class="trip">' + i + '</div>';
}
html += '</div>';
document.getElementById('todayPrayTime').innerHTML = html;
function go($list, i) {
var l = $list.length, $trip = $list.eq(i);
$trip.show().fadeIn(700, function(){
$trip.fadeOut(700, function(){
$trip.hide();
go($list, (++i) % l);
});
})
}
go($('#main .trip'), 0).trip {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="todayPrayTime"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62652844
复制相关文章
相似问题
腾讯云开发者
