更新

Question

我们正在使用jQuery slider进行幻灯片演示。现在，手柄在播放期间动画显示。但是如果用户暂停，则应立即将手柄设置为静止位置（即应停止动画）。

首先，我想，最简单的方法是使用滑块中的animate选项（http://api.jqueryui.com/slider/#option-animate）。但是我找不到创建线性动画的方法。

因此，我们现在使用CSS转换解决了这个问题。如果正在播放滑块，则会向句柄添加CSS过渡类。如果暂停滑块，则会删除CSS类，并且滑块手柄会立即跳转到位。

这适用于Chrome和Safari，但遗憾的是没有使用Firefox或InternetExplorer。他们不会立即停止句柄，但会将动画运行到最后，这会让人感到困惑，因为句柄不会立即对用户操作做出反应。

用于在jQuery滑块中切换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 */

}

这种方法取决于能否设置滑块的最大值以匹配滑块的宽度。如果这不是一个大问题，滑块手柄的左侧位置将与滑块的值匹配，您可以将其用作停止值。

在IE9 / 10，Chrome和Firefox中经过测试和使用。

Answer 2

除了动画，您可以尝试重置/更新滑块的值，方法是将其附加到间隔，例如并在点击暂停时清除间隔

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

Answer 3

$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（已添加）

.stop {
     transition:none !important;
}

如何突然停止线性动画jQuery UI滑块手柄（跨浏览器）

更新

3 个答案: