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

Question

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

     marriage,birthday,annual dinner,school

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

几秒钟后，下一个词生日将取代婚姻，然后下一个，这个扫描继续。

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