jQuery - 关于Animate的问题

时间:2017-05-05 22:27:22

标签: javascript jquery html css jquery-animate

我正在创建自己的网站,我对jQuery有疑问。在下面我写了我正在运行的jQuery代码。

当页面加载时,text1,text2和list显示在页面上。 6秒后,它们逐渐淡出。

现在,我希望在第一组消失之后出现一组新的文本然后我希望第二组淡出并再次显示第一组。我的意思是,某种循环。我是jQuery的新手,所以我无法弄明白。  如果你们能帮助我,我会很高兴。感谢。

//jQuery
$( "#text1" ).load( "index.html", function() {
$("#text1").animate({right: 'toggle'}, 550).delay(6000).fadeOut();
});
$( "#text2" ).load( "index.html", function() {
$("#text2").animate({left: 'toggle'}, 550).delay(6000).fadeOut();
});
$( "#list" ).load( "index.html", function() {
$("#list").animate({right: 'toggle'}, 550).delay(6000).fadeOut();
});

好的,我试过像这样的setInterval();

setInterval(function(){
$( "#basvuruyap" ).load( "index.html", function() {
$("#basvuruyap").fadeIn(870);
});
$( "#text1" ).load( "index.html", function() {
$("#text1").animate({right: 'toggle'}, 550).delay(6000).fadeOut();
});
$( "#text2" ).load( "index.html", function() {
$("#text2").animate({left: 'toggle'}, 550).delay(6000).fadeOut();
});
$( "#list" ).load( "index.html", function() {
$("#list").animate({right: 'toggle'}, 550).delay(6000).fadeOut();
});
});

一旦这个组逐渐消失,他们立即重复动画,我试图延迟它(如此延迟)(不起作用):

setInterval(function(){}).delay();

然后我尝试了这样做(效果不好):

setInterval(function(){}, 3000);

我需要一些想法来解决这个问题。我想做的就是改变文本/背景并不断地进行订购(不是滑块)。如果允许,我可以发送一个网站的链接,该网站上有我正在谈论的动画。 顺便说一句,我有另一个问题要问。我总是使用""编码的东西。这是一个问题还是无关紧要?

1 个答案:

答案 0 :(得分:0)

好吧,我不能写一个完整的答案,因为你正在学习它,但这就是你需要的:

http://api.jquery.com/animated-selector/

$(":animated").promise().done(function() {
    //Code here will be executed when all other animations are done
});

setInterval()

setInterval()方法以指定的时间间隔(以毫秒为单位)调用函数或计算表达式。

所以你需要的只是使用setInterval来调用一个函数,等待其他动画完成,然后完成这项工作。这很简单。