1

我正在尝试在此函数中为随机工作添加一个很好的过渡，但我似乎无法让它工作，请记住我是这方面的新手。如果有人能解释我如何在单词之间添加褪色效果，我将不胜感激！

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

谢谢！

4

3 回答 3

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/

于 2013-07-02T05:27:51.233 回答
0

首先，您不需要两个document.ready功能。删除一个..为了效果，您可以使用fadeInorslideDown或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-02T05:20:51.643 回答
0

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-02T05:24:51.940 回答