内部div元素在用户徘徊时在循环中淡入/淡出

Question

我已经在其他地方在Stackoverflow上尝试了很多例子，但没有运气，基本上我有一个简单的div与一些子元素，我想淡入并在用户悬停文章元素时在循环中输出。你可以看到我得迄今这里：

http://jsfiddle.net/rWXu7/

我的HTML：

我的JS：

var tickerID; 
$("article.product").hover(function(){ 

    var list=$(this).find('div.offers > div'); 

    (function repeatTicker() { 
     list.each(function(index) { 
     $(this).fadeIn('slow').delay(2000).fadeOut('slow'); 
     }); 
     tickerID = setTimeout(repeatTicker, 2000); 
    }()); 
}, 
// Rollout 
function(){ 
    clearTimeout(tickerID); 
}); 

我的CSS：

article { 
    background-color: red; 
    padding: 20px; 
} 

正如您现在所看到的，每个循环一次启动所有元素的fadeIn，Delay和fadeOut，而我想每次循环一个元素。

我明白为什么这不起作用，但我在金融时刻制定出如何最好地解决问题。

我想避免使用像'innerfade'之类的东西，因为它似乎矫枉过正单个淡入/淡出循环。

任何想法非常感谢。 :)

Answer 1

DEMO：http://jsfiddle.net/rWXu7/5/

var divs = $('div.offers > div'), 
    interval, current = $(divs[0]); 

var cycle = function(){ 
    var prev = current; 
    current = current.next(); 
    if (current.length == 0){ 
     current = $(divs[0]); 
    }  
    prev.fadeOut(function(){ 
     current.fadeIn(); 
    }); 
} 

$('article').hover(function(){ 
    interval = window.setInterval(cycle, 1000);  
}, function(){ 
    window.clearInterval(interval); 
}); 

后来编辑 :(支持多种产品）

DEMO：http://jsfiddle.net/rWXu7/10/

var interval; 

var cycle = function(parent){ 
    var currentIdx = parent.data('current') || 0, 
     prev = $(parent.find('div.offers > div').get(currentIdx)); 
    current = prev.next(); 
    if (current.length == 0){ 
     current = $(parent.find('.offers > div').get(0)); 
     currentIdx = 0; 
    }else{ 
     currentIdx++; 
    } 
    prev.fadeOut(function(){ 
     current.fadeIn(); 
     parent.data('current', currentIdx) 
    }); 
} 

$('article').hover(function(e){ 
    interval = window.setInterval(function(){ 
     cycle($(e.currentTarget)); 
    }, 1000);  
}, function(){ 
    window.clearInterval(interval); 
}); 

Answer 2

仍然不是百分百的你后，但我猜它是这样的？

http://jsfiddle.net/rWXu7/4/

还是邋遢，我只能发挥与它周围的小提琴，但它应该帮助您的思维清楚块

var list = $("div.offers > div"); 

$(".offers").mouseenter(function(){ 
    list.each(function(index) { 
     $(this).show(); 
    }); 
    cycle(0); 
}).mouseout(function(){ 
    list.each(function(index) { 
     if (index != 0) { 
      $(this).stop().hide(); 
     } else { 
      $(this).stop().fadeIn().show(); 
     } 
    }); 
}); 

function cycle(counter) { 
    var test = list.eq(counter).fadeOut("slow").fadeIn("slow", function(){ 
     if (counter != (list.length - 1)) { 
      counter++; 
     } else { 
      counter = 0; 
     } 
     cycle(counter); 
    }); 
}