How to suddenly stop jQueryUI linear animated descriptor (crossbrowser)

Question

We use jQuery slider for our slide show. Now the pen animation during playback. But if the user pauses, the handle should be set to the fixed position immediately (i.e., the animation should be stopped).

At first I thought it was easiest to use the option animate( http://api.jqueryui.com/slider/#option-animate ) with the slider. But I did not find a way to create a linear animation .

Therefore, we solved this problem 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 immediately moves to the position.

This works fine with Chrome and Safari, but unfortunately not with Firefox or InternetExplorer. They do not stop the descriptor immediately, but run the animation to the end, which is confusing because the descriptor does not respond to user action.

---

The current JavaScript code for switching CSS in the jQuery slider is as follows:

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

CSS is as follows:

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

You can see a live example of a complete player here:

http://lookr.com/1239271528

---

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

---

Update

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

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

, - :

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

}

, . , , .

IE9/10, Chrome Firefox.

Answer 3

/ , , ,

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
});