如何在鼠标悬停时暂停 Jquery div 滑块并在鼠标悬停时重新启动它

Question

晚上好， 我这里准备了jsfiddle Demo http://jsfiddle.net/Z6Y95/1/

这是html：

<ul>
<li><a href="#" class="stop" id="dev" >a1</a></li>
<li><a href="#" class="stop" id="facebook" > a2</a></li>
<li><a href="#" class="stop" id="seo">a3</a></li>
<li><a href="#" class="stop" id="support">a4</a></li></ul>
<div id="serviceimg" class="serviceimg">
<div class="hide" name="dev" style="background:red;color:#fff;">a1</div>
<div class="hide" name="facebook" style="background:red;color:#fff;">a2</div>
<div class="hide" name="seo" style="background:red;color:#fff;">a3</div>
<div class="hide" name="support" style="background:red;color:#fff;">a4</div>
</div>

这是一个有效的 jquery div 滑块，但我需要在 href 鼠标悬停它并显示与此关联的特定 div。 在鼠标移出时，它必须继续 div 滑动，但在我的情况下，在鼠标移出时，我会暂停几秒钟而没有显示 div。 如何在鼠标移出时开始 div 滑动？

提前谢谢你！

Answer 1

这是更新后的 JS 代码：

$('.serviceimg div').hide(); // hide all slides
    $('.serviceimg div:first-child').show(); // show first slide

    var prop;



    prop = setInterval(function () {
        $('.serviceimg div:first-child').hide()
            .next('div').show()
            .end().appendTo('.serviceimg');
    }, 3000);

    $('div').hover(function () {

        clearInterval(prop);

    }, function () {
        console.log('out');
        prop = setInterval(function () {
            $('.serviceimg div:first-child').hide()
                .next('div').show()
                .end().appendTo('.serviceimg');
        }, 3000);
        return false;
    });

DEMO

SetInterval 可能非常“危险”，因为它会在您悬停时堆叠。我使用return false 来防止这种情况。

.hover 函数结果证明最适合您的情况。您可以阅读更多信息here。