Question

我想只使用HTML，CSS和JQuery来旋转文本片段，并对短语产生淡入/淡出效果，以便随着下一个淡出而淡出。我有以下代码，但是无法弄清楚在我的淡入/淡出效果中添加的位置。或者，是否有更好的方法来旋转带有淡入/淡出效果的文本片段？我想远离插件，因为使用资源丰富的插件可能有点过分。看起来像我想做的事情可以通过一些原生的JQuery函数来实现。

HTML：

<h1>I like <span id="phrase">apples</span>.</h1>

使用Javascript：

$(document).ready(function() {
    function setRandomPhrase() {
        // Set phrases into an array
        var phrases = new Array(
            "oranges",
            "pears",
            "strawberries",
            "grapes",
            "pineapples",
            "bananas"
        );

        // Selects a random phrase
        var random = Math.floor(Math.random()*phrases.length);
        // Sets the area to use that random phrase
        $("#phrase").text(phrases[random]);
    }
    // Fire the function every 5 seconds...
    setInterval(setRandomPhrase,5000);
});

这是一个半工作样本：http://jsbin.com/ayukac/1/edit ...只需要帮助找出淡入淡出效果的添加位置。

感谢您的帮助！

Answer 1

这样的东西？淡出当前的水果，然后一旦淡出完成，更新值，然后淡入。

...

var random = Math.floor(Math.random()*phrases.length);

$("#phrase").fadeOut("slow",function(){
    $("#phrase").text(phrases[random]).fadeIn("slow");
});

...

Answer 2

http://jsbin.com/ayukac/2/edit

我还添加了一项基本检查，以防止随机选择连续出现两次相同的单词。

var random = Math.floor(Math.random()*phrases.length);

while (phrases[random] == $("#phrase").text())
  {
     var random = Math.floor(Math.random()*phrases.length);
  }
// Sets the area to use that random phrase
$("#phrase").fadeOut('slow',function(){$("#phrase").text(phrases[random]).fadeIn('slow')});

Answer 3

基础setInterval函数是这样的：

setInterval(function() {
       // Do something every 5 seconds
 }, 5000);

所以你在setRandomPhrase所做的一切也都会被解雇。你需要做的是添加这个：

$("#phrase").fadeOut("slow",function(){
      $("#phrase").text(phrases[random]).fadeIn("slow");
}

而不是：

$("#phrase").text(phrases[random]);

Answer 4

如果您使用的是jQuery，为什么不能使用jQuery插件。如果您喜欢这样做，可以使用以下链接。 Web Ticker

JQuery旋转文本片段/短语

4 个答案: