2012-08-05 75 views
0

DIV這是我的jQuery PRG。我已經完全處理了這個問題並正確地爲圖像添加了動畫。這裏第一個圖像動畫2秒並停止,第二個圖像繼續動畫。在第四個圖像動畫後,我需要開始第一個圖像動畫。我想在無限次的時間裏調用anim()函數。請幫我的setInterval在jQuery的

我的腳本是jQuery中包含四個功能showFirst,showSecond,showThird,showfour

這是動畫功能調用四個功能在時間間隔

$(function anim() { 

    $('div.f:not(:first)').hide(); // Hide all columns except the first 
    $('div.s:not(:first)').hide(); // Hide all columns except the first 
    $('div.c:not(:first)').hide(); // Hide all columns except the first 
    $('div.d:not(:first)').hide(); // Hide all columns except the first 
    // showFirst(); 

    var timesRun = 0; 
    var interval = setInterval(function(){ 
     timesRun += 1; 
     if(timesRun === 2){ 
      clearInterval(interval); 

      var timesRun1= 0; 
      var interval1 = setInterval(function(){ 
      timesRun1 += 1; 
      if(timesRun1 === 2){ 
       clearInterval(interval1); 

       var timesRun2 = 0; 
       var interval2 = setInterval(function(){ 
        timesRun2 += 1; 
        if(timesRun2 === 2){ 
         clearInterval(interval2); 
         var timesRun3 = 0; 
         var interval3 = setInterval(function(){ 
          timesRun3 += 1; 
          if(timesRun3 === 2){ 
           clearInterval(interval3); 
          } 
          showFour(); 
         }, 1000); 
        } 
        showSecond(); 
       },1000); 
      } 
      showThird(); 
     }, 1000); }showFirst(); 
    }, 1000);  
}); 

我有四象與四個備用圖像。我在2秒的時間間隔內改變了圖像。我在anim函數中編寫這段代碼。現在我在動畫裏面調用函數。但它不工作。

回答

0

只需撥打anim()再次當你的動畫的其餘部分完成

 if(timesRun3 === 2){ 
      clearInterval(interval3); 
      anim(); 
    } 
0

也許你在找這樣的事情?

var current = 0; 
var i1 = 'http://jsfiddle.net/img/top-bg.png'; 
var i2 = 'http://jsfiddle.net/img/logo.png'; 

function anim() { 
    if (++current > 4) { 
     current = 1; 
    } 
    var div = $('#wrap div').eq(current); 
    div.animate({ 
     height: '0px' // this can be also set to fixed size 
    }, 2000, function() { 
     var img = $(this).children('img')[0]; 
     img.src = img.src == i1 ? i2 : i1; 
     $(this).animate({ 
      height: '100px' 
     }, 2000, function() { 
      anim(); 
     }); 
    }); 
} 


$(document).ready(function() { 
    $('#wrap img').prop('src', i1); 
    anim(); 
}); 

@jsfiddle