我如何使用jquery在5秒后淡入和淡出单词

Question

我想在一段时间后在我的网页上显示一些单词。我有这些话。

     marriage,birthday,annual dinner,school

我在页面顶部显示这一行“我们安排了像'婚姻'这样的事件”

一段时间后，下一个单词生日将取代婚姻，然后接下来，这个scanario继续。

我没有找到任何最好的jquery插件。

如果有人知道请帮助。

由于

Answer 1

jsBin demo with fade animation

HTML：

<h2> "We arrange these type of events like <span>marriage</span> "</h2>

jQuery的：

var c=0, words=['marriage','birthday','annual dinner','school'];


function loop(){
  $('h2 span').delay(1000).fadeTo(300,0,function(){
     $(this).text( words[++c%words.length] ).fadeTo(300,1,loop);
  });
}    
loop(); // start it!

---

如果你想要更多的真实动画，你可以选择：

jsBin demo with slide animation

function loop(){
  $('h2 span').delay(1000).animate({top:-50},300,function(){
    $(this).css({top:100}).text( words[++c%words.length]).animate({top:0},300,loop);
  });
}
loop(); // start it!

拥有h2{overflow:hidden}和h2 span{position:relative;}

请务必使用H2更具体的选择器，例如$('#fade_title span')