淡入淡出DIV文本 - 删除循环

-1

我创建了一个带3个不同引号的DIV淡入淡出。淡入淡出DIV文本 - 删除循环

我正在使用下面的jQuery代码相同。

(function() { 
var quotes = $(".changetxt"); 
var quoteIndex = -1; 
function showNextQuote() { 
    ++quoteIndex; 
    quotes.eq(quoteIndex % quotes.length) 
     .fadeIn(1000) 
     .delay(4000) 
     .fadeOut(500, showNextQuote); 
} 
showNextQuote(); 
})();

HTML代码

<div class="toptext"> 
    <div class="changetxt"> 
     ”The simple act of paying positive attention to<br> 
     people has a great deal to do with productivity” 
     <p>- Tom Peters</p> 
    </div> 

    <div class="changetxt"> 
     ”If you deprive yourself of outsourcing and your competitors<br> do not, you are putting yourself out of business” 
     <p>- Lee Kuan Yew</p> 
    </div> 

    <div class="changetxt"> 
     ”Focus on being PRODUCTIVE<br> 
     instead of busy” 
     <p>- Tim Ferris</p> 
    </div> 
</div>

这是工作完美，但我不想循环，有3个报价，所以只要它表明最后一个（第三）报价，应立即停止动画和没有循环。

我该如何做到这一点？

来源

2015-05-29 Manoj Soni

检查quoteIndex是否在第三次执行中。如果是，那么return

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

    function showNextQuote() { 
     if (quoteIndex == 2) { 
      return; 
     } 
     ++quoteIndex; 
     quotes.eq(quoteIndex % quotes.length) 
      .fadeIn(1000) 
      .delay(4000) 
      .fadeOut(500, showNextQuote); 
    } 
    showNextQuote(); 
})();

更新

为了有最后的报价入住期间，您可以使用不同的方法中，你有条件地fadOut

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

    function showNextQuote() { 
     ++quoteIndex; 
     quotes.eq(quoteIndex % quotes.length) 
      .fadeIn(1000) 
      .delay(4000); 
     if(quoteIndex < 2){ 
      quotes.eq(quoteIndex % quotes.length).fadeOut(500, showNextQuote); 
     } 
    } 
    showNextQuote(); 
})();

来源

2015-05-29 11:47:52 AmmarCSE

这工作完全唯一的事情是在最后一个报价出现后，div变空了，我宁愿要留下最后一个报价。 –

@ManojSoni，看到我的更新 – AmmarCSE

这正是我想要的，谢谢Zillion mate ... –

只是不在第三次后调用该功能，如下所示：

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

    function showNextQuote() { 
     quoteIndex += 1; 

     if (quoteIndex === 3) return; 

     quotes.eq(quoteIndex % quotes.length) 
     .fadeIn(1000) 
     .delay(4000) 
     .fadeOut(500, showNextQuote); 
    } 

    showNextQuote(); 
}());

来源

2015-05-29 11:48:55

循环停在空格，我宁愿要最后一句留下来，为你的裁判，我粘贴有问题的HTML –

在showNextQuote内部，而不是返回将quoteIndex设置回零。

function showNextQuote（）{ quoteIndex + = 1;

**if (quoteIndex === 3) quoteIndex = 0;** 

    quotes.eq(quoteIndex % quotes.length) 
    .fadeIn(3000) 
    .delay(4500) 
    .fadeOut(500, showNextQuote); 
}

来源

2016-07-30 18:48:18

淡入淡出DIV文本 - 删除循环

回答

相关问题