Question

好吧，伙计们，我试着让内容（6）随着时间的推移逐渐消失并逐渐淡出。内容可以在我删除了ID的部分标签中找到，因为我已经看到这可能会导致问题。该部分及其内容和进度条如下所示：

<progress id="Main-Progress" max="100"></progress>

<section class="class">
    <header>
    <p>stuff</p>
    </header>
    <table>
    </table>
</section>

JS代码如下，这很简单，但不能正常工作。我已经尝试了两种不同的方法，如下所示（for loop和JQuery.each）。两者都贯穿6个部分，但只有第一部分播放转换代码然后停止。 for循环版本也给我一个错误：

未捕获的TypeError：无法读取属性＆＃39; defaultView＆＃39;未定义的 jquery-3.2.1.min.js：3

我已经尝试了setTimeout和setInterval来连续运行该函数，但都不起作用。

function main ()
{
    var arrSections  = $('section');                        // get sections which contain judge/court room schedules
    var numSections  = arrSections.length;                  // get number of sections
    var incrProgress = Math.round( (1/numSections)*100 );   // get percentage increment for progress bar

    window.setTimeout ( cycleSlideshow(arrSections, numSections, incrProgress), 5 );
} // end function main

function cycleSlideshow (inSections, inNumSections, inIncrement)
{
    var ctr = 0;

    // Method 1 - JQuery.each
    // begin slideshow code using JQuery
    inSections.each( function ()
    {
    ctr++;
    $('#Main-Progress').attr('value', ctr * inIncrement);
    $(this).fadeIn(1000).delay(3000).fadeOut(1000);         
    }
    );

    // Method 2 - for loop
    // begin slideshow code using for loop
    for (ctr = 1; ctr <= inSections.length; ctr++)
    {
    // increment progress bar       
    $('#Main-Progress').attr('value', ctr * inIncrement);

    // slideshow effects
    $(this).fadeIn (1000);
    $(this).delay  (3000);
    $(this).fadeOut(1000);
    } // end for loop

} // end cycle slideshow

Answer 1

根据你评论中的信息，你说它一次运行它们（而不是假设它只是第一个运行它），这是一种迫使循环等待的简单方法。 p>

var ctr = 1
var loop = setInterval(function(){
  //do things here
  ctr++;
  if (ctr > inSections.length) ctr = 1;
}, (1 + 3 + 1) * 1000);

（注意：我不确定inSections.length是否正确，你应该能够弄清楚我能得到什么。）

因此，通过循环并触发所有命令。然后，等待命令运行的秒数（1为淡入，3为显示，1为淡出），并再次运行。

一旦柜台说出来了，嘿，我们已经到了最后＆＃34;它重置为1（充分利用JS及其使用全局范围变量快速松散的倾向）。

JQuery Timed FadeIn和FadeOut仅针对第一项运行

1 个答案: