javascript - 停止 jQuery Fade Loop 并添加 Hover Not Working

Question

我正在尝试在 jQuery 中实现淡入淡出循环

You can see it here

但这并不像我想要的那样工作。当我将鼠标悬停在 point1 上时，此代码只是停止 Fade 循环.

我希望代码以这样一种方式工作:当您将鼠标悬停在其中一个点(point1、point2 等)上时，淡入淡出循环将停止/暂停，并且只有指定的.trip将显示，然后在悬停/鼠标移出时，淡入淡出循环将从顶部重新开始。

例如:

如果我将鼠标悬停在 <div class="point2">Hover Point 2</div> 上，循环应该停止，并且只有 <div id="2" class="trip two">Item2</div>应该显示。或者如果我将鼠标悬停在 <div class="point1">Hover Point 1</div> 上在循环期间，循环应该停止并且 <div id="2" class="trip one">Item1</div> , 应该显示出来，一旦鼠标移出，循环应该从顶部开始。

尝试了一堆东西，请帮忙。我该如何解决这个问题？

Answer 1

您正确地停止了动画，但随后您需要显示正确的元素并隐藏所有其他元素。此外，您想在鼠标移出时通过调用 go 重新启动循环。

$('.point1').hover(function(){
    $('.trip').stop(true).hide();    
    $("#1").show();
},function(){
    i = 0;
    go();
});

http://jsfiddle.net/MtmxN/68/