與jquery褪色

我想添加一個漂亮的過渡到這個函數的隨機workds，我似乎無法得到它的工作，記住我是這個新手。如果有人能夠解釋我如何能夠在詞語之間添加淡化效果，我真的很感激它！與jquery褪色

<script type="text/javascript"> 
jQuery(document).ready(function($) { 
words = ['ASS-KICKING','MIND-BLOWING','AWESOME','SWEET']; 
$(function() { 
    setInterval(function() { 
    var thisWord = words[Math.floor(Math.random() * words.length)]; 
    $("#container").text(thisWord); 
    },3000); 
}); 
}); 
</script>

謝謝！

來源

2013-07-02 Everlong

firstofall你沒有需要兩個document.ready功能there.remove one..and的效果，你可以使用fadeIn或slideDown或animation()

試試這個（使用淡入）

<script type="text/javascript"> 
jQuery(document).ready(function($) { 
words = ['ASS-KICKING','MIND-BLOWING','AWESOME','SWEET']; 

setInterval(function() { 
    var thisWord = words[Math.floor(Math.random() * words.length)]; 
    $("#container").hide().text(thisWord).fadeIn('slow'); 
},3000); 
}); 

</script>

來源

2013-07-02 05:20:51 bipen

jQuery的提供了三種衰落方法：.fadeIn，.fadeOut,.fadeToggle。這些都採用相似的參數。其中一個參數是動畫完成後調用的回調函數。

你的代碼應該是這個樣子：

jQuery(document).ready(function($) { 
    words = ['ASS-KICKING','MIND-BLOWING','AWESOME','SWEET']; 

    setInterval(function() { 
     $('#container').fadeOut('slow', function(){ 
      var thisWord = words[Math.floor(Math.random() * words.length)]; 
      $('#container').text(thisWord).fadeIn('slow'); 
     }); 
    },3000); 
});

來源

2013-07-02 05:24:51 Kiruse

這正是我一直在尋找的更改time delay！非常感謝！ – Everlong

使用fadeIn()和fadeOut()這個

，並使用現成的功能，一旦像，

words = ['ASS-KICKING','MIND-BLOWING','AWESOME','SWEET']; 
$(function() { 
    setInterval(function() { 
     var thisWord = words[Math.floor(Math.random() * words.length)]; 
     $("#container").fadeIn(1500).text(thisWord).fadeOut(1500); 
    },3000); 
});

小提琴http://jsfiddle.net/eKE8k/1/

更新與使用回調

words = ['ASS-KICKING','MIND-BLOWING','AWESOME','SWEET']; 
$(function() { 
    setInterval(function() { 
    var thisWord = words[Math.floor(Math.random() * words.length)]; 
     $("#container").fadeOut(1000,function(){$(this).text(thisWord).fadeIn(1000);}); 
    },5000); 
});

小提琴http://jsfiddle.net/eKE8k/2/

來源

2013-07-02 05:27:51

因此，您可以看到文本被突然更換，然後淡出並立即淡入。您需要使用回撥才能獲得適當的時間。 – Kiruse

回答

相關問題