Question

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

但这不符合我想要的方式。当我将鼠标悬停在point1上时，此代码会停止淡入循环。

我希望代码能够以这样的方式工作：当您将鼠标悬停在其中一个点（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/

Answer 2

这是我的看法：

HTML：

<div id="main">
    <div id="1" class="trip 1">Item1</div>
    <div id="2" class="trip">Item2</div>
    <div id="3" class="trip">Item3</div>
</div>
<hr>
<br/>
<div class="point" id="show1">Hover Point 1</div>
<br/>
<div class="point" id="show2">Hover Point 2</div>
<br/>
<div class="point" id="show3">Hover Point 3</div>

JS

var $elem = $('#main .trip'), l = $elem.length, i = 0;

function go() {
    $elem.eq(i % l).fadeIn(700, function() {
        $elem.eq(i % l).fadeOut(700, go);
        i++;
    })
}

go();

var tripToShow = 0;

$('.point').hover(function(){
    tripToShow = this.id.replace('show', '');
    $('.trip').stop(true).hide();
    $('#'+tripToShow).show();
},function(){
    $('.trip').hide();
    i = 1;
    tripToShow = 0;
    go();
});

小提琴：http://jsfiddle.net/stevoperisic/GKZ2F/

停止jQuery Fade循环并添加悬停不起作用

2 个答案: