Question

我正在尝试为这个函数中的随机化工作添加一个很好的过渡，我似乎无法让它工作，请记住我是一个新手。如果有人可以解释我如何在单词之间添加淡化效果，我会非常感激！

<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>

谢谢！

Answer 1

使用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/

已更新使用回调更改time delay

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/

Answer 2

首先你不需要两个document.ready功能。删除一个..为了效果你可以使用fadeIn或slideDown或animation()

试试这个（使用fadeIn）

<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>

Answer 3

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);
});

随着jquery褪色

3 个答案: