How to abruptly stop a linear animated jQueryUI slider handle (crossbrowser)

Question

We are using the jQuery slider for our slideshow. Now, the handle is animated during playback. But if the user pauses, the handle should be set to a stationary position immediately (i.e. the animation should be stopped).

At first, I thought, this would be easiest to use the animate option (http://api.jqueryui.com/slider/#option-animate) from the slider. But I did not find a way to create a linear animation.

Therefore, we have solved this issue by now using CSS transitions. If the slider is playing, a CSS transition class is added to the handle. If the slider is paused, the CSS class is removed and the slider handle jumps into position immediately.

This works fine with Chrome and Safari, but unfortunately not with Firefox or InternetExplorer. They don't stop the handle immediately, but run the animation to the end, which is confusing because the handle does not react immediately to the user action.

---

The current JavaScript code for switching the CSS in the jQuery slider looks like this:

$slider.on('change.mode', function(event, playing){
    if(playing)
        $(this).addClass('playing');
    else
        $(this).removeClass('playing');
});

The CSS looks like this:

.playing .ui-slider-handle {
    #x-browser > .transition(1s, linear, left); //LESSCSS Shortcut
}

You can view a live example of the complete player here:

http://lookr.com/1239271528

---

It works in Chrome and Safari, but can anyone tell me how to make this work in Firefox and Internet Explorer?

---

Update

Maybe the real question here should be: how to stop a CSS animation for sure in all browsers immediately?

Answer 1

$slider.on('change.mode', function(event, playing){
    if(playing){
        $(this).addClass('playing');
        $(this).find('.ui-slider-handle').addClass('stop'); //ADDED
    }
    else{
        $(this).removeClass('playing');
        $(this).find('.ui-slider-handle').removeClass('stop');  //ADDED
    }
});

---

CSS (ADDED)

.stop {
     transition:none !important;
}

Answer 2

This may be oversimplifying things, but you could try something like this:

Working Example

JS

// shows values in the demo
var showAmount = function (event, ui) {
    $("#amount").val(ui.value);
    $("#amount2").val(parseInt($('.ui-slider-handle').css('left'), 10));
};
$(function () {
    $("#slider").slider({
        animate: 5000, //slowed down to 5s for demo only, for normal timing set to true
        value: 0,
        min: 0,
        max: 500, // make the max value the same as the width
        slide: showAmount,
        change: showAmount
    });

});

// click to trigger animation to 500
$("#play").click(function () {
    $("#slider").slider("value", 500);
});

// click to set the value of the slider to the handles left position
$("#stop").click(function () {
    $("#slider").slider('option', "value", parseInt($('.ui-slider-handle').css('left'), 10));
});

CSS

#slider {
    width: 500px; /* must match the max value of the slider */

}

This method kind of hinges on being able to set the maximum value of slider to match the width of the slider. If that's not a big problem the left position of the slider's handle will match the value of the slider and you can use that as a stopping value.

Tested and working in IE9/10, Chrome and Firefox.

Answer 3

Rather than animation you could try resetting/updating the value of the slider, by attaching it to an interval for eg and clearing the interval on click of pause

var myVar = setInterval(function(){myTimer()},100);
var tim=parseInt($('#slider').slider("option", "value"));
function myTimer()
{
jQuery("#slider").slider({value:tim--});


}


$("#pause").click(function() {
      clearInterval(myVar);
      timer = null
});