Question

我正在尝试在动画结束时运行一个函数。我尝试了以下方法，但它不起作用：

function carrousel_header() {
    jQuery("#web_header_ani_ele_1").delay(2000).fadeIn(2000);
    jQuery("#web_header_ani_ele_2").delay(4000).fadeIn(2000);
    jQuery("#web_header_ani_ele_3").delay(6000).fadeIn(2000);
    jQuery("#web_header_ani_ele_4").delay(8000).fadeIn(2000);
    jQuery("#web_header_ani_ele_5").delay(10000).fadeIn(2000);
    jQuery("#web_header_ani_ele_6").delay(12000).fadeIn(2000);

    setInterval(carrousel_header(),1500);
}

这个想法是元素以特定的顺序显示和隐藏自己。我需要能够在最后一个完成动画执行后显示/隐藏下一个<div>。

<div id="web_header_ani_ele_content">
    <div id="web_header_ani_ele_1" style="display:none;"></div>
    <div id="web_header_ani_ele_2" style="display:none;"></div>
    <div id="web_header_ani_ele_3" style="display:none;"></div>
    <div id="web_header_ani_ele_4" style="display:none;"></div>
    <div id="web_header_ani_ele_5" style="display:none;""></div>
    <div id="web_header_ani_ele_6" style="display:none;"></div>
    <div id="web_header_ani_texto_1" style="display:none;"></div>
</div>

<script>
    carrousel_header();
</script>

我的修改工作代码，我现在加入

function carrousel_header()
{
jQuery("#web_header_ani_ele_1").delay(2000).fadeIn(2000);
jQuery("#web_header_ani_ele_2").delay(2000).fadeIn(2000);
jQuery("#web_header_ani_ele_3").delay(2000).fadeIn(2000);
jQuery("#web_header_ani_ele_4").delay(2000).fadeIn(2000);
jQuery("#web_header_ani_ele_5").delay(2000).fadeIn(2000);
jQuery("#web_header_ani_ele_6").delay(2000).fadeIn(2000);


jQuery("#web_header_ani_ele_1").hide(1);
jQuery("#web_header_ani_ele_2").hide(1);
jQuery("#web_header_ani_ele_3").hide(1);
jQuery("#web_header_ani_ele_4").hide(1);
jQuery("#web_header_ani_ele_5").hide(1);
jQuery("#web_header_ani_ele_6").delay(2000).hide(1,function(){carrousel_header();});



//setInterval(carrousel_header,1500);

}

Answer 1

您的第一个问题是您没有正确地呼叫setInterval()。你需要改变这个：

setInterval(carrousel_header(),1500);

到此：

setInterval(carrousel_header,1500);

包括括号告诉JS立即执行该函数并将其返回值传递给setInterval()（这不是你想要的）。你只想传递一个函数引用（没有parens）。

你的第二个问题是你不会让这些物品看不见，所以在第一次之后不再褪色。您将需要添加淡出它们的代码或类似的东西。

就个人而言，我可能会使用一个完成函数来触发它并添加一个相反的函数来淡出它们：

function carrousel_header() {
     jQuery("#web_header_ani_ele_1").delay(2000).fadeIn(2000);
     jQuery("#web_header_ani_ele_2").delay(4000).fadeIn(2000);
     jQuery("#web_header_ani_ele_3").delay(6000).fadeIn(2000);
     jQuery("#web_header_ani_ele_4").delay(8000).fadeIn(2000);
     jQuery("#web_header_ani_ele_5").delay(10000).fadeIn(2000);
     jQuery("#web_header_ani_ele_6").delay(12000).fadeIn(2000, carrousel_headerOut);
}

function carrousel_headerOut() {
     // customize each one of these to the individual timing that you want
     jQuery("#web_header_ani_ele_1").fadeOut(2000);
     jQuery("#web_header_ani_ele_2").fadeOut(2000);
     jQuery("#web_header_ani_ele_3").fadeOut(2000);
     jQuery("#web_header_ani_ele_4").fadeOut(2000);
     jQuery("#web_header_ani_ele_5").fadeOut(2000);
     // call carrousel_header on the completion function of the longest animation
     jQuery("#web_header_ani_ele_6").fadeOut(2000, carrousel_header);
}

这可以避免额外的计时器，并避免动画和间隔计时器之间的时间差异产生任何小的积累，因为它运行了很长时间。

Jquery检测结束函数并重复

1 个答案: