在Newsslider中的jquery.css

Question

我做了一個Newsslider（工程），但我沒有得到按鈕1到4來相應地突出顯示面板。他們只是一直在改變。我認爲它與即時處理的.css有關。我假設我需要將css調用放入超時函數。我只是不確定如何。

http://jsfiddle.net/BkZyD/

var whichpanel = 1; 
$('.news-numbers div:nth-child(' + whichpanel + ')').css({ 
'background-color': '#00F' 
}, 5000); 

function newsslider() { 
if (whichpanel < 4) { 
    $('.news-numbers div:nth-child(' + whichpanel + ')').css({ 
     'background-color': '#243239' 
    }, 5000); 

    $('.news-slider').delay(3000).animate({ 
     'margin-top': '-=250px' 
    }, function() { 

    }); 
    whichpanel += 1; 
    $('.news-numbers div:nth-child(' + whichpanel + ')').css({ 
     'background-color': '#00F' 
    }, 5000); 

} else if (whichpanel >= 4) { 
    $('.news-slider').delay(3000).animate({ 
     'margin-top': '0' 
    }, 2000); 
    whichpanel = 1; 
} 

setTimeout(newsslider, 0); 
} 

newsslider(); 

Answer 1

的問題是組合使用的setTimeout和延遲;使用它們，每隔10ms重複一次newsslider函數，並增加whichpanel。 您使用延遲和動畫順利地爲您的div製作動畫，但news-numbers連續更改。

對於執行連續循環，最好使用setInterval並在動畫功能中增加whichpanel。有了這個，你不需要任何其他延遲或超時。

代碼：

var whichpanel = 1; 
$('.news-numbers div:nth-child(1)').css({ 
    'background-color': 'red' 
}); 

function newsslider() { 

    if (whichpanel < 4) { 

     $('.news-slider').animate({ 
      'margin-top': '-=250px' 
     }, function() { 
      whichpanel += 1; 
      $('.news-numbers div').css({ 
       'background-color': 'black' 
      }); 
      $('.news-numbers div:nth-child(' + whichpanel + ')').css({ 
       'background-color': 'red' 
      }); 

     }); 

    } else { 

     $('.news-slider').animate({ 
      'margin-top': '0' 
     }, 1000, function() { 
      whichpanel = 1; 
      $('.news-numbers div').css({ 
       'background-color': 'black' 
      }); 
      $('.news-numbers div:nth-child(1)').css({ 
       'background-color': 'red' 
      }); 

     }); 
    } 

} 

var int = self.setInterval(function() { 
    newsslider() 
}, 3000); 

這裏是工作提琴：http://jsfiddle.net/IrvinDominin/p4U3B/2/