0

我在 Stackoverflow 上的其他地方尝试了许多示例，但没有运气，基本上我有一个简单的 div，其中包含许多子元素，我想在用户悬停文章元素时循环淡入和淡出。你可以在这里看到我到目前为止的位置：

http://jsfiddle.net/rWXu7/

我的 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>

我的 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;
}

正如您目前所看到的，每个循环一次在所有元素上启动淡入、延迟和淡出，而我想一次“循环”每个元素。

我明白为什么这不能按原样工作，但我正在努力解决如何最好地解决问题。

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

任何想法都非常感谢。:)

4

2 回答 2

1

演示：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);
});

后期编辑：（支持多种产品）

演示：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);
});
于 2013-07-24T13:26:22.503 回答
0

仍然不是 100% 你所追求的，但我猜是这样的？

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);
    });
}
于 2013-07-24T12:48:33.383 回答