使用jQuery延遲更改innerHTML文本

所以我有一個非常簡單的按鈕，基本上可以打開和關閉表單 - 我們將在我們的網站上使用此功能，因爲我們正在進行更新，並且希望獲得任何反饋頁。這裏的jQuery的我到目前爲止：使用jQuery延遲更改innerHTML文本

<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的交換褪色？

感謝您的幫助。

P.S. - 我知道代碼可以進一步優化，我只想讓功能首先工作 - 然後我回去凝聚我所能做到的。

來源

2012-02-29 wiliam.orazi

已經嘗試過：'$（本）.delay（1000）的.html（'給我們一個快速'）;' – 2012-02-29 15:09:01

您可以通過使用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 
    } 
);

來源

2012-02-29 15:03:29

是的，我想我將不得不設置setTimeout - 出於某種原因'.delay（）'不工作...感謝您的幫助！ – 2012-02-29 15:56:44

'delay'只適用於在元素上排隊的動作 - 通常是由'animate（）'方法創建的動作。更改html屬性不會進入隊列，所以不受'delay'的影響。 – 2012-02-29 16:05:13

感謝您的解釋。 – 2012-03-01 19:36:30

如何：

$(document).ready(function() { 

     function changeText(){ 
     $("#myDiv").text('test') 
     } 

     setTimeout(changeText, 2000); 

    });

來源

2016-03-10 08:09:04

使用jQuery延遲更改innerHTML文本

回答

相關問題