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

Question

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

     marriage,birthday,annual dinner,school

我在页面顶部显示了这一行“我们安排了诸如‘婚姻’之类的此类事件”

几秒钟后，下一个单词“生日”将取代“婚姻”，然后下一个单词将继续，此情况继续。

我没有找到任何最好的 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')