setInterval- Javascript not working

Question

嘗試循環一個函數。

這是一個簡單的文字動畫 - 由字母左側字母文本將

1.Fade然後

2.Fade出了逐個字母。

3.這將重複，但文字將再次出現在 頁面上的另一個隨機位置。

當我將間隔延遲設置爲1000時，文本總共出現4次，每次間隔爲1秒。第一次，文本出現在左邊淡出，第二個文本只是整體閃爍，最後，逐漸消失。

因此，我將延遲設置爲4700.動畫按需要工作，但不是循環。

http://jsfiddle.net/y5C4G/3/

在textillate回調函數不是工作壓力太大，所以我選擇的setInterval。

HTML：

<span class="brand"> 
       <h1> 
        <ul class="texts"> 
         <li>E L Y S I U M</li> 
         <li></li> 
        </ul> 
       </h1> 
      </span> 

JS：

$(window).bind("load", function() { 

      function ShowBrand() { 
      var docHeight = $(document).height(); 
      var docWidth = $(document).width(); 

      $newSpan = $(".brand"); 
      spanHeight = $newSpan.height(); 
      spanWidth = $newSpan.width(); 

      maxHeight = docHeight - spanHeight; 
      maxWidth = docWidth - spanWidth; 

      $newSpan.show().css({ 
       top: Math.floor(Math.random() * maxHeight), 
       left: Math.floor(Math.random() * maxWidth) 
      }).textillate({ 
      in: {effect:'fadeInLeft'}, 
      out: {effect:'fadeOutUp'} 
      });     
     }    

     setInterval(ShowBrand,4700);   

    }); 

Answer 1

我不那麼肯定要準確地實現你的動畫是什麼，但我猜你會喜歡什麼要做的是這樣的：

DEMO：http://jsfiddle.net/YKebf/9/

loadTextillate(jQuery); 

$newSpan = $(".brand"); 
$newSpan.show().textillate({ in : { 
     effect: 'fadeInLeft' 
    }, 
    out: { 
     effect: 'fadeOutUp', 
     callback: function() { 
      ShowBrand(); //set as a callback function 
     } 
    }, 
    loop: true 
}); 

function ShowBrand() { 

    var docHeight = $(document).height(); 
    var docWidth = $(document).width(); 
    var spanHeight = $newSpan.height(); 
    var spanWidth = $newSpan.width(); 
    var maxHeight = docHeight - spanHeight; 
    var maxWidth = docWidth - spanWidth; 
    var newPosTop = Math.floor(Math.random() * maxHeight); 
    var newPosLeft = Math.floor(Math.random() * maxWidth); 
    console.log("New Position",newPosTop,newPosLeft); 
    $newSpan.css({ 
     top:newPosTop, 
     left:newPosLeft 
    }); 
} 

CSS：

.brand{ 
    position:absolute; 
} 

希望這有助於。

Answer 2

編輯：正如naota所述，您可以設置回調。通過這樣做，您將不需要任何setInterval，並且您可能不需要修改插件文件中的任何代碼。請參閱更新的演示：http://jsfiddle.net/lotusgodkk/y5C4G/6/

而是在每個區間，爲什麼不改變跨度的頂部和左側值，而添加loop:true到textillate初始化textillate的。

JS：

$(window).bind("load", function() { 
ShowBrand(); 
$('.brand').textillate({ in : { 
     effect: 'fadeInLeft' 
    }, 
    out: { 
     effect: 'fadeOutUp', 
     callback: function() { 
      ShowBrand() 
     } 
    }, 
    loop: true, 
}); 
}); 

function ShowBrand() { 
    var docHeight = $(document).height(); 
    var docWidth = $(document).width(); 
    $newSpan = $(".brand"); 
    spanHeight = $newSpan.height(); 
    spanWidth = $newSpan.width(); 
    maxHeight = docHeight - spanHeight; 
    maxWidth = docWidth - spanWidth; 
    $newSpan.show().css({ 
     top: Math.floor(Math.random() * maxHeight), 
     left: Math.floor(Math.random() * maxWidth) 
    }); 
} 

此外，還要確保你已經.brand定位。 CSS：

.brand{position:absolute;} 

演示：http://jsfiddle.net/lotusgodkk/y5C4G/6/