基本的なスライダのイベント処理

Question

jqueryのプラグイン開発について少し学びたいと思っています。それは何

：

• それはマウスが入ったときの間隔がクリアされ、アニメーションが
• を停止し、マウスが離れたときの間隔が

を再起動します。しかし

を右から左にスライドここに問題があります：

私がいつも入力して、スライドの機能を壊した。読み込みアニメーションは意図どおりに続きます。

私は、イベントハンドリングがmouseenterとleaveで行われているとは思いません。この事柄を扱うボタンについて考えましたが、おそらく他の何か他の完全に間違った/愚かなことを考えました。 here：：:)

はこちらをご覧

Answer 1

あなたは、（スタート）、再び

私はあなたのfiddle

の変更を更新init()前にタイムアウトと停止スライダーをクリアするのを忘れ：

var interval, timeout; 

function stopSlider() { 
    console.log("function: stopSlider");   
    clearTimeout(timeout); 
    clearInterval(interval);   
} 

$('.slides').on('mouseenter', function() { 
    stopSlider(); 
}).on('mouseleave', function() { 
    stopSlider(); 
    timeout = setTimeout(init, pause); 
}); 

function startSlider() { 
    // just a tip 
    // $('.loading').animate({"width": "0"}, 0); // makes no sense, use instead .css() 
    $('.loading').css('width', '0'); 
    ... 
} 

Answer 2

代わりに間隔をクリアすると、あなたのアニメーションの停止と移動を制御するためのフラグを使用して試みることができます。クリアインターバルを使用してアニメーションを停止し、新しいインターバルを作成してアニメーションを再開することは、アニメーションを制御することではありません。以下のようなものは、あなたのケースに役立ち、別の方向であなたを助けるかもしれません。 ：

<div id='mySlider' style='width:200px;height:40px;background-color:blue;'></div> 
 
<script> 
 
    var mySlider = document.getElementById('mySlider'); 
 
    var isOver = true; 
 

 
    mySlider.addEventListener('mouseenter' , function(){ 
 
    isOver = false; 
 
    }); 
 
    
 
    mySlider.addEventListener('mouseout' , function(){ 
 
    isOver = true; 
 
    }); 
 

 
    var myID = setInterval(function(){ 
 
    if(isOver === false) 
 
     mySlider.style.width = parseInt(mySlider.style.width) + 1 + "px"; 
 
    },10); 
 

 
</script>