二つの機能

Question

私がすべきMouseEnterイベントに開始され、いくつかのスライダーを作成するには、この簡単なスクリプトを使用しています間の変数の配信は、mouseLeaveに停止します。

$(".grid-item").mouseenter(function() { 

    var slides = $(this).find(".slide-image"), 
     counter = 0; 

    var test = setInterval(function(){ 
    slides.removeClass('active'); 
    slides.eq(counter).addClass('active'); 
    counter++; 

    if (counter > slides.length) {counter = 0;}; 
    }, 600); 

}).mouseleave(function() { 

    clearInterval(test); 
    // $(".slide-image").removeClass('active'); 

}); 

はスライダーはかなり細かい起動しますが、mouseleave-イベントにIコンソールエラーが発生しました"未知のReferenceError：テストが定義されていません"。インターバルの変数が2番目の関数に渡されないので、私はそれを考える。解決策はありますか？

Check out my CodePen!

Answer 1

は

var test; 
$(".grid-item").mouseenter(function() { 

    var slides = $(this).find(".slide-image"), 
     counter = 0; 

    test = setInterval(function(){ 
    slides.removeClass('active'); 
    slides.eq(counter).addClass('active'); 
    counter++; 

    if (counter > slides.length) {counter = 0;}; 
    }, 600); 

}).mouseleave(function() { 

    clearInterval(test); 
    // $(".slide-image").removeClass('active'); 

});