在 mouseenter 上停止 timeOut 和动画并在 mouseleave 上继续答案

【问题标题】：Stop timeOut and animation on mouseenter and continue on mouseleave在 mouseenter 上停止 timeOut 和动画并在 mouseleave 上继续
【发布时间】：2013-06-06 23:51:31
【问题描述】：

我想摆脱一个滑块插件，所以我尝试构建自己的，

一切正常，但我坚持在悬停时停止整个事情并在鼠标离开时再次重新启动，

这是我的 js：

function startPslider(val) {
    if (!val) {
        val = 0;
    }
    var holder = 'slideHolder';
    var text = 'slideText';
    startInterval(holder, text, val);
}

function startInterval(holder, text, val) {
    var t;
    var i = val;
    if (i > 2) {
        i = 0
    }

    $('#' + holder + i).animate({
        opacity: 1,
    }, function () {
        $(this).addClass('active')
        $('.' + text + i).animate({
            opacity: 1,
            left: 0
        }, 1200);
        t = setTimeout(function () {
            $('.' + text + i).animate({
                opacity: 0,
                left: '-400px'
            }, 1200);
            $('#' + holder + i).animate({
                opacity: 0,
            }, 2200).removeClass('active');
            startPslider(i + 1);
        }, 4000)
    });

    // Here´s the not working hover-function 
    $('#hpCanvas').hover(function () {
        clearTimeout(t);
    }, function () {
        var id = $('.active').attr('id');
        var slide = id.substring(11, 22);
        console.log(slide)
        startPslider(slide);
    });
}

$(function () {
    startPslider();
});

尝试通过向当前持有人添加“活动”类来解决此问题，并在悬停时尝试捕捉当前幻灯片编号 (val) 并重新启动它，从正确的幻灯片开始，但它不起作用如我所愿，

看看这个小提琴，http://jsfiddle.net/zDh76/ 你会在那里找到 html 和 css，因为你会看到只要你不悬停，一切都可以正常工作。

也许有人有帮助提示如何停止动画、清除计时器并在 mouseleave 上继续正确滑动？

更新

我分开开始和结束间隔

function startPslider(i) {
if(!i){
    i=0;
}
if(i >2){
    i=0
    }
console.log('started Slider with slide:'+i)
var holder = 'slideHolder';
var text = 'slideText';
startInterval(holder, text, i);
}

function startInterval(holder,text,i) {
var t;
var v;
console.log('started Interval with slide:'+i);

$('#'+holder+i).animate({
        opacity:1,
    }, function(){
        $('.'+text+i).animate({
            opacity:1,
            left:0
        },1200);
        t= setTimeout(function(){endInterval(holder,text,i);    },4000);
});
 }

 function endInterval(holder,text,i,cont){
console.log('end Interval with slide:'+i);
$('.'+text+i).animate({
    opacity:0,
    left:'-400px'
},1200);
$('#'+holder+i).animate({
    opacity:0,
},2200, function(){
    $('.slideHolder').css('opacity',0);
             i = i+1;
    startPslider(i);        
});
 }

【问题讨论】：

您的 startPslider(); 函数定义采用 val 参数，但您在调用时没有向其传递任何内容
我只是在初始开始时没有传递'val'参数，'val'代表当前幻灯片，所以初始val=0所以它从第一张幻灯片开始，
我尝试过，但我做不到，我发现一个错误是变量“i”的总和有误，我添加了一个 div，您可以在其中看到 2 个变量“val”和“我"... jsfiddle.net/zDh76/4
是的，谢谢，我想这就是重点，如果你不悬停一切都很好，我认为我的悬停功能完全错了，我不知道做得更好：/

标签： javascript jquery animation hover timeout

【解决方案1】：

我自己发现的，

我需要在 mouseleave 函数中取消绑定 #hpCanvas 上的悬停事件，例如

    $('#hpCanvas').hover(function(){
        $('.slideHolder, .slideText').stop(true,true);
        clearTimeout(t)
    },function(){
      endInterval(holder,text,i);
      $('#hpCanvas').unbind('mouseenter mouseleave') 
    })

因为下一次将其与悬停事件绑定的调用位于第一个悬停事件的 mouseleave 部分内。

感谢大家阅读本文

【讨论】：