0

我想仅使用 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 ...只需要帮助确定在哪里添加淡入淡出效果。

谢谢你的帮助！

4

4 回答 4

1

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

... 

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

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

...

于 2012-11-01T16:42:46.517 回答
1

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')});
于 2012-11-01T16:49:27.187 回答
0

基本setInterval功能是这样的：

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

所以你在setRandomPhrase火灾中所做的一切也是如此。你需要做的是添加这个：

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

而不是这个：

$("#phrase").text(phrases[random]);
于 2012-11-01T16:44:32.550 回答
0

如果您使用 jQuery，为什么不能使用 jQuery 插件。如果您喜欢这样做，您可以使用以下链接。 网络代码

于 2012-11-01T17:41:40.867 回答