延迟使用jQuery更改innerHTML文本 [英] Delay changing innerHTML text using jQuery
本文介绍了延迟使用jQuery更改innerHTML文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
所以我有一个非常简单的按钮,基本上可以打开和关闭表单-我们将在我们的网站上使用此按钮,因为我们正在进行更新,并且希望在任何页面上都可以提供反馈.这是我到目前为止使用的jQuery:
So I've got a pretty simple button that basically toggles a form on and off - we'll be using this on our site since we're doing an update and would like feedback available on any page. Here's the jQuery I have so far:
<script>
// Toggle Button Text Change
$('#feedbackLink').hover(
// Change HTML on mouseover
function() {
$(this).html('Send us a quick message!');
},
// Change back on mouseout
function() {
$(this).html('How can we improve this page?');
}
);
// Toggle Button and Form
$('#feedbackLink').click(function() {
// Hide feedback button
$('#feedbackLink').toggle(500);
// Display feedback form
$('#feedbackForm').delay(501).toggle(250);
});
// Feedback Form
$('#cancel').click(function() {
// Slides form from view when "CANCEL" is clicked
$('#feedbackForm').toggle(500);
// Fades original link back into view after a defined delay to allow for previous form to be hidden
$('#feedbackLink').delay(501).toggle(75);
});
</script>
所以我的问题是,如何在.hover调用或.html交换中延迟或淡入淡出?
So my question is, how can I delay or fade in either the .hover call or the .html swap?
感谢您的帮助.
P.S. -我知道代码可以进一步优化,我只是想先使功能正常工作-然后我回过头来压缩我能做的事情.
P.S. - I know the code can be further optimized, I just like to get the functionality working first - then I go back and condense what I can.
推荐答案
您可以使用setTimeout()
:
var timeout;
$('#feedbackLink').hover(
function() {
clearTimeout(timeout);
timeout = setTimeout(function() {
$("#feedbackLink").html('Send us a quick message!');
}, 2000); // change the HTML after 2 seconds
},
function() {
clearTimeout(timeout);
timeout = setTimeout(function() {
$("#feedbackLink").html('How can we improve this page?');
}, 2000); // change the HTML after 2 seconds
}
);
这篇关于延迟使用jQuery更改innerHTML文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文