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

Question

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

     marriage,birthday,annual dinner,school

我在页面顶部显示这一行“我们安排这些类型的活动，如'婚姻'”

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

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

如果有人知道请帮助。

谢谢

Answer 1

带有淡入淡出动画的jsBin演示

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演示

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')