Grundlegende Slider-Ereignisbehandlung

Question

Ich sitze auf einem grundlegenden jQuery Slider, um etwas über die Plugin-Entwicklung in jquery zu lernen.

Was es tut:

• von rechts gleitet nach links
• , wenn die Maus das Intervall eintritt gelöscht und die Animation stoppt
• , wenn die Maus das Intervall verlässt startet

Aber Hier ist das Problem:

Wenn ich ständig den Schieberegler die anim eingeben und verlassen Funktionen der Folien brechen. Die Ladeanimation wird wie vorgesehen fortgesetzt.

ich glaube es ist nicht die beste Idee, dass die Eventhandling auf mouseenter und leave hören. dachte über Tasten, die mit diesen Dingen umgehen, aber vielleicht ist es etwas anderes völlig falsch/dumm hier. :)

haben Sie einen Blick hier: here:

Answer 1

Sie haben vergessen, wieder Ihre Timeout und Stoppen Slider vor init() (Start)

I aktualisiert Ihre fiddle

Änderungen zu löschen:

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

Anstatt das Intervall des Löschens, könnten Sie mit Fahnen versuchen, die Stop and Go Ihrer Animation zu steuern. Wenn Sie ClearInterval verwenden, um eine Animation zu stoppen und sie fortzusetzen, indem Sie ein neues Intervall erstellen, haben Sie keine Kontrolle darüber. Etwas wie das Folgende könnte sich für Ihren Fall als nützlich erweisen und Ihnen in eine andere Richtung helfen. :

<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>