Jquery 当用户悬停时，使内部div元素在循环中淡入/淡出

我在Stackoverflow的其他地方尝试了很多例子，但是运气不好，基本上我有一个简单的div，其中有许多子元素，当用户悬停在article元素上时，我希望在循环中淡入淡出。你可以看到我到目前为止的进展：

我的HTML：

<article class="product">
<div class="offers">
    <div>Offer 1</div>
    <div style="display: none;">Offer 2</div>
    <div style="display: none;">Offer 3</div>
</div>

我的CSS：

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

正如您所看到的，目前每个循环都会在所有元素上同时启动fadeIn、Delay和fadeOut，而我希望一次“循环”一个元素

我明白为什么这样做不起作用，但我在想如何最好地解决这个问题时有一个金发碧眼的时刻

我想避免使用像“innerfade”这样的东西，因为对于单个淡入/淡出循环来说，这似乎有些过分

---

非常感谢您的任何想法。：）

还是不能百分之百确定你在追求什么，但我猜是这样的

仍然脏兮兮的，因为我只能在小提琴上摆弄它，但它应该能帮你清除思维障碍

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);
    });
}

演示：

以后编辑：（支持多个产品）

演示：

---

感谢您修复我的JS代码块@Zaheer.：）你所说的循环是什么意思？我已经编辑了这个问题，希望能让它更清楚。：）谢谢，我想这几乎就是我想要的，但我只希望一次显示一个报价项目..，因此项目1淡出，项目2淡入，项目2淡出，项目3淡入，项目3淡出，项目1淡入-循环。：）很棒的东西，但是在我的场景中（很抱歉我忘了提到这一点），我在一个页面上有多个产品-太棒了！非常感谢你——我想我不会一个人去那里的！

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);
    });
}

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);
});

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);
});