jQuery CSS 在 X 秒内发生变化 - 第一次转换是否可能有所不同？

Question

我有以下代码，每 2000 毫秒添加和删除一个类:

http://jsfiddle.net/Kh2fz/1/

var $elements = $('#fp-slides div'); 
var total_elements = $elements.length;
var element_with_class = 0;
window.setInterval( function () {
  $elements.eq(element_with_class).removeClass('current');
  element_with_class += 1;
  if ( element_with_class === total_elements )
  {
      element_with_class = 0;
  }
  $elements.eq(element_with_class).addClass('current');  
}, 2000 );

我想知道是否可以更改它，以便第一个效果是 1500，然后之后的每个更改都是 2000。

Answer 1

您可以第一次使用setTimeout，然后运行setInterval`:

var $elements = $('#fp-slides div'); 

var total_elements = $elements.length;
var element_with_class = 0;

var handler = function () {

  $elements.eq(element_with_class).removeClass('current');

  element_with_class += 1;

  if ( element_with_class === total_elements )
  {
      element_with_class = 0;
  }

  $elements.eq(element_with_class).addClass('current'); 
};

window.setTimeOut( function() { 
    handler(), 
    window.setInterval(handler, 2000); 
}, 1500);

http://jsfiddle.net/Kh2fz/3/