在mouseenter上停止timeout和動畫，並在mouseleave上繼續

Question

我想擺脫滑塊插件，所以我嘗試構建自己的插件，

一切正常，但我被卡住，無法在懸停時停止整個操作，並在mouseleave上再次將其重新啟動，

這是我的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);        
});
 }

Answer 1

我自己發現的

我需要在mouseleave函數中取消綁定#hpCanvas上的懸停事件，例如

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

因為將下一個與懸停事件綁定的調用是在第一個懸停事件的mouseleave-part內部。

無論如何，感謝大家閱讀本文