我试图为延迟函数创建一个切换效果。
单击“函数”:
$('#swap').on('click', function(e){
//code bellow $('#swap').delay(1000).attr('src') == 'Play.png'
if ($(this).attr('src') == 'Play.png') {
$('#swap').attr('src') == 'Pause.png'
}
else{
$('#swap').attr('src') == 'Play.png'
}
单击时,会启动另一个函数的延迟:
$('#swap').delay(1000).attr('src') == 'Play.png'
在此之后,如果您再次单击#swap
,延迟会暂停(而不是停止),如果再次单击,延迟就会继续。这个是可能的吗?
因为现在如果点击的话,延迟会重新开始吗?
发布于 2013-12-13 03:25:21
.delay()
设置定时器以延迟队列中后续项的执行。
(例如: fadeIn()、fadeOut()、.slideUp()、slideDown()等动画.)
医生: http://api.jquery.com/delay/
在您的例子中,尝试使用:
setTimeout(function(){
// Do something
},1000);
,如果我明白的话,你的意思是有些事情.?
var clicked;
$('#swap').on('click', function(e) {
if(!clicked) {
setTimeout(function(){
$(this).attr('src','Play.png');
},1000);
clicked = true;
} else {
$(this).attr('src','Pause.png');
clicked = false;
}
});
或使用切换事件
$('#swap').toggle(function() {
setTimeout(function(){
$(this).attr('src','Play.png');
},1000);
},function() {
$(this).attr('src','Pause.png');
});
医生: http://api.jquery.com/toggle-event/
更新:
$('#swap').on('click',function() {
var $this = $(this);
var src = $this.attr('src');
if (src == 'Play.png') {
setTimeout(function(){
$this.attr('src','Pause.png');
},1000);
} else {
$this.attr('src','Play.png');
}
});
用clearTimeout()更新:
var swapTimer;
$('#swap').on('click', function () {
var $this = $(this);
var src = $this.attr('src');
if (src == 'Play.png') {
swapTimer = setTimeout(function () {
$this.attr('src', 'Pause.png');
}, 1000);
} else {
clearTimeout(swapTimer);
$this.attr('src', 'Play.png');
}
});
Demo : http://jsfiddle.net/qnDh8/ (Play.png =红色,Pause.png =黄色)
https://stackoverflow.com/questions/20565304
复制相似问题