Jquery检测何时结束函数并重复

Jquery detect when end function and repeat

本文关键字：函数 结束 检测 何时 Jquery      更新时间：2023-09-26

我试图在动画完成时运行函数。我尝试了以下方法，但它不起作用:

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);
}

您的第一个问题是您没有正确调用setInterval()。你需要修改这个:

setInterval(carrousel_header(),1500);

: 

setInterval(carrousel_header,1500);

包含括号告诉JS立即执行函数并将其返回值传递给setInterval()(这不是你想要的)。你只需要传递一个函数引用(不带父元素)。

你的第二个问题是，你从来没有使项目不可见，所以反复淡出他们在第一次之后没有任何作用。你需要添加代码来淡出它们或类似的东西。

就我个人而言，我可能会使用一个补全函数来触发它，并添加一个相反的函数来淡出它们，像这样:

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);
}

这避免了额外的计时器，避免了动画和间隔计时器之间的时间差异，因为它运行了很长一段时间。

相关文章：