我想创建一个带有事件的按钮,当用户点击它时会发生该事件。 如果有人点击了此按钮,则会显示一个滑块。
我想要一个功能,如果没有人释放这个滑块在5秒后对div切换,但是如果有人释放滑块,就不会发生任何事情!
我创造了一个小提琴,希望有人能解决这个问题? http://jsfiddle.net/84nVQ/50/
function handler1() {
clearTimeout(time);
$('#volumeChange').attr("class", "selected");
$('#volume-slider').slider({
orientation: 'horizontal',
value: 100,
max: 1,
step: 0.01,
animate: true,
slide: function(e, ui) {
alert(ui.value);
}
}).show();
}
function handler2() {
time = setTimeout(function() {
$('#volumeChange').attr("class", "");
$('#volume-slider').toggle();
$('#volume-slider').clearTimeout(time);
}, 5000);
}
function handler3() {
clearTimeout(time);
}
$("#volumeChange").on({
click: function(e) {
handler1();
$('#volume-slider').mouseleave(handler2).mouseenter(handler3);
}
});
答案 0 :(得分:0)
有两个错误:未定义的时间变量和clearTimeout。这段代码应该可行
var time = null;
function handler1() {
clearTimeout(time);
$('#volumeChange').attr("class", "selected");
$('#volume-slider').slider({
orientation: 'horizontal',
value: 100,
max: 1,
step: 0.01,
animate: true,
slide: function(e, ui) {
movie.volume = ui.value;
}
}).show();
}
function handler2() {
time = setTimeout(function() {
$('#volumeChange').attr("class", "");
$('#volume-slider').toggle();
clearTimeout(time);
}, 5000);
}
function handler3() {
clearTimeout(time);
}
$("#volumeChange").on({
click: function(e) {
handler1();
$('#volume-slider').mouseleave(handler2).mouseenter(handler3);
}
});