admin管理员组文章数量:1323342
I want to use the methode .delay()
to wait 1 sec before changing the content of an element. In my page, I have a button and when the ajax request is done, the button diplays "done". After that, I want to wait 1 sec and display "download". But the problem is that "download" is displayed immediately after the "done" without the delay.
Here is my code :
$('#chocobo').click(function(){
$('#chocobo').html('<div id="banana" class="fa fa-refresh fa-spin"></div> Loading');
$.post("includes/modlist/pack.php",function(data){
//$('#banana').addClass("fa-spin");
$('#chocobo').addClass('done');
$('#chocobo').html('<div id="banana" class="fa fa-check"></div> Done');
$('#chocobo').delay(1000).html('<div id="banana" class="fa fa-refresh"></div> Download');
});
});
Can someone help me please ?
I want to use the methode .delay()
to wait 1 sec before changing the content of an element. In my page, I have a button and when the ajax request is done, the button diplays "done". After that, I want to wait 1 sec and display "download". But the problem is that "download" is displayed immediately after the "done" without the delay.
Here is my code :
$('#chocobo').click(function(){
$('#chocobo').html('<div id="banana" class="fa fa-refresh fa-spin"></div> Loading');
$.post("includes/modlist/pack.php",function(data){
//$('#banana').addClass("fa-spin");
$('#chocobo').addClass('done');
$('#chocobo').html('<div id="banana" class="fa fa-check"></div> Done');
$('#chocobo').delay(1000).html('<div id="banana" class="fa fa-refresh"></div> Download');
});
});
Can someone help me please ?
Share Improve this question edited Sep 17, 2015 at 23:52 scniro 17k8 gold badges66 silver badges107 bronze badges asked Sep 17, 2015 at 23:43 ErlaunisErlaunis 1,4516 gold badges33 silver badges50 bronze badges3 Answers
Reset to default 6I don't think leveraging delay()
is best used here. You're fine with just using a setTimeout
. Observe the following...
[...]
$('#chocobo').html('<div id="banana" class="fa fa-check"></div> Done');
setTimeout(function() {
$('#chocobo').html('<div id="banana" class="fa fa-refresh"></div> Download');
}, 1000);
[...]
The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.
See the delay() docs for example usages and scenarios
JSFiddle Link - simplified demo
The jQuery delay function is used for things added to a queue, like steps of an animation. You could try using the setTimeout instead to get the effect you're looking for:
setTimeout(function(){
$('#chocobo').html('<div id="banana" class="fa fa-refresh"></div> Download');
}, 1000); // 1000 being 1s in ms
EDIT: Whoops! I was too slow. Erlaunis has the better answer anyway too.
However, you can use it on this way, with callback function for fadeIn()
, if you don't want to use setTimeout():
http://jsfiddle/ufsxaxm3/1/
$( "#chocobo" ).html('<div id="banana" class="fa fa-check"></div> Done').fadeIn('slow', function() {
$('#chocobo').html('<div id="banana" class="fa fa-refresh"></div> Download').delay(1000).fadeIn(1000);
});;
So, you need some jquery effect/animation, and then delay() will work as you wish...
本文标签: javascriptAdd a delay with jqueryStack Overflow
版权声明:本文标题:javascript - Add a delay with jquery - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742134857a2422323.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论