Question

当你悬停div时，如何暂停淡入淡出/淡出循环？

JS：

$(document).ready(function() {
    var divs = $('.cm-slide-page').hide(),
    i = 0;
    (function cycle() {
    divs.eq(i).fadeIn(800).delay(3000).fadeOut(800, cycle);
    i = ++i % divs.length;
    })();
});

HTML：

<div class="cm-slide-page">text 1</div>
<div class="cm-slide-page">text 2</div>
<div class="cm-slide-page">text 3</div>

CSS：

.cm-slide-page { display: none; }

提前致谢！

Answer 1

尝试这样的事情：

$(document).ready(function() {
    var divs = $('.cm-slide-page').hide(),
    i = 0;
    (function cycle() {
        divs.eq(i).fadeIn(800).delay(3000).fadeOut(800, cycle).mouseover(function(){
        $(this).stop(true, false).mouseout(function(){
        cycle($(this));
    });
    });
        i = ++i % divs.length;

    })
    ();

});

Answer 2

<强> jsBin demo

var divs = $('.cm-slide-page'),
    n = divs.length,
    i = 0,
    itv = null;

divs.hide().eq(i).show();

function cycle() {
    itv = setInterval(function(){
        divs.eq(i++%n).fadeIn(800).siblings().fadeOut(800);
    }, 3000);
}

divs.hover(function( ev ){
    return ev.type=="mouseenter" ? clearInterval(itv) : cycle();
});

cycle(); // Start !!!

这将有一个更好的淡入淡出过渡从一个到另一个，以实现这个用途：

.cm-slide-page {
  position:absolute;
}

jQuery循环 - 在悬停时暂停

2 个答案: