淡入淡出文本循环 - jQuery

我有两个引号包裹在H2标记中，我想淡入和淡出使用jQuery。当页面加载时，我想要第一个报价淡入，延迟几秒钟并淡出，然后下一个报价做同样的事情。我希望它继续循环两个引号。任何帮助将不胜感激。淡入淡出文本循环 - jQuery

2012-08-22 Tyler Almond

你可以做这样的：

CSS：

.quotes {display: none;}

HTML：

<h2 class="quotes">first quote</h2> 
<h2 class="quotes">second quote</h2>

的Javascript：

// code gets installed at the end of the body (after all other HTML) 
(function() { 

    var quotes = $(".quotes"); 
    var quoteIndex = -1; 

    function showNextQuote() { 
     ++quoteIndex; 
     quotes.eq(quoteIndex % quotes.length) 
      .fadeIn(2000) 
      .delay(2000) 
      .fadeOut(2000, showNextQuote); 
    } 

    showNextQuote(); 

})();

工作演示：http://jsfiddle.net/jfriend00/n4mKw/

此代码适用于任意数量的引号，而不仅仅是两个。如果引号后面有内容，则可能需要修复引号所在的容器大小，以便从一个引号跳转到另一个引号时不会更改大小（导致其他页面内容跳转）。

来源

2012-08-22 01:45:43 jfriend00

当我添加脚本时，我的页面正在加载空白。我在页面上有一堆其他项目没有加载。 –

@TylerAlmond - 当我看不到你所做的事情时，我该如何帮助你解决这个问题？显然，你有某种脚本或HTML错误。发布一个链接到你已经完成或在错误控制台中查看，看看你有什么错误，以便你可以修复它们。这个概念在正确执行时有效。仅供参考，上面的脚本在页面的''部分末尾的'

这就是你需要得到上面的脚本工作。首先，你需要引用apropriate jQuery框架，所以无论是在<head>部分，或在<body>标签结束后，所有其他元素添加此脚本标签：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

然后，主JavaScript必须在上述<script>标签后加载：

<script type="text/javascript"> 
(function() { 

    var quotes = $(".quotes"); 
    var quoteIndex = -1; 

    function showNextQuote() { 
     ++quoteIndex; 
     quotes.eq(quoteIndex % quotes.length) 
      .fadeIn(2000) 
      .delay(2000) 
      .fadeOut(2000, showNextQuote); 
    } 

    showNextQuote(); 

})(); 
</script>

来源

2013-10-30 09:10:09 Kudzai

淡入淡出文本循环 - jQuery

回答

相关问题