mayo83 mayo83 - 1 month ago 16
jQuery Question

Basic slider event handling

Hi,

im sitting on a basic jQuery Slider to learn a bit about plugin developement in jquery.

What it does:


  • it slides from right to left

  • when mouse enters the interval is cleared and the animation stops

  • when mouse leaves the interval restarts



But here is the problem:

When i constantly enter and leave the slider the animate functions of the slides breaks. the loading animation continues as intended.

i believe its not the best idea that the eventhandling is hearing on
mouseenter
and
leave
. thought about buttons that handle this things but maybe its something other completely wrong / stupid here. :)

have a look here: here:

Answer

You forgot to clear your Timeout and stopping Slider before init() (start) again

I updated your fiddle

Changes:

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'); 
    ...
}
Comments