【问题标题】:Fading in and out becomes very quick after some time [javascript]一段时间后淡入淡出变得非常快[javascript]
【发布时间】:2014-03-20 19:38:18
【问题描述】:

在我将此加载一段时间后,淡入和淡出变得比预期快约 3 倍(一开始它可以正常工作)。任何帮助,也许解释我做错了什么?谢谢。

<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
    var x =-1
    function setWord(){
        function come(){
            $(".fde").fadeIn(200);
        }
        come();
        function fade(){
            $(".fde").fadeOut(200);
        }
        setTimeout(fade, 2800);
        var phrases =new Array("War is peace","Freedom is slavery","Ignorance is strength");
        if (x == phrases.length-1){x = -1}
        x += 1;  
        $(".test").text(phrases[x]);
    }
    setTimeout(setWord,0);
    setInterval(setWord, 3000);
});
</script>
</head>
<body>
<p class="fde"><span class='test'></span></p>    
</body> 
</html>

【问题讨论】:

  • 你能提供一个小提琴吗?

标签: javascript jquery text rotation fading


【解决方案1】:

jsBin DEMO

其实你不需要任何setIntervalsetTimeout,你可以简单地使用.animate() 回调再次运行你的函数:

$(function(){ // DOM ready

  var x = 0,
      $test = $('.test'),
      phrases = ["War is peace","Freedom is slavery","Ignorance is strength"],
      n = phrases.length;

  function loopWords(){
     $test.text(phrases[x++%n]).parent().fadeTo(500,1).delay(2000).fadeTo(500, 0, loopWords);
  }                             
  loopWords(); // Start

});

【讨论】:

    【解决方案2】:

    尝试将 setInterval 值增加到 5000 / 10000。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2018-12-17
      • 2013-03-17
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多