javascript - 如何突然停止线性动画 jQuery UI slider 句柄(跨浏览器)

Question

我们正在使用 jQuery slider对于我们的幻灯片。现在， handle 在播放过程中是动画的。但如果用户暂停， handle 应立即设置为静止位置(即动画应停止)。

起初，我想，使用 slider 中的 animate 选项 ( http://api.jqueryui.com/slider/#option-animate ) 最简单。但是我没有找到创建线性动画的方法。

因此，我们现在使用 CSS 过渡解决了这个问题。如果 slider 正在播放，则向 handle 添加一个 CSS 过渡类。如果 slider 暂停，则删除 CSS 类并且 slider handle 立即跳到位。

这适用于 Chrome 和 Safari，但不幸的是不适用于 Firefox 或 InternetExplorer。他们不会立即停止 handle ，而是将动画运行到最后，这令人困惑，因为 handle 不会立即对用户操作使用react。

---

当前用于在 jQuery slider 中切换 CSS 的 JavaScript 代码如下所示:

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

CSS 看起来像这样:

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

您可以在此处查看完整播放器的实例:

http://lookr.com/1239271528

---

它在 Chrome 和 Safari 中工作，但谁能告诉我如何在 Firefox 和 Internet Explorer 中工作？

---

更新

也许这里真正的问题应该是:如何确保在所有浏览器中立即停止 CSS 动画？

Answer 1

这可能过于简单化了，但你可以尝试这样的事情:

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

}

这种方法取决于能够设置 slider 的最大值以匹配 slider 的宽度。如果这不是大问题，则 slider handle 的左侧位置将与 slider 的值匹配，您可以将其用作停止值。

在 IE9/10、Chrome 和 Firefox 中测试并工作。