html - jQuery淡入然后从innerHTML淡出文本不起作用

Question

我有一个 jQuery 函数来逐个淡入淡出文本。但是，由于我从 jQuery 放置文本，该功能无法正常工作。当我尝试运行它时，它只显示0. 1to4未显示。

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>

小提琴。

标签： htmljquery

Answer 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;

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>