jQuery開發的簡單切換不工作

下面是代碼：jQuery開發的簡單切換不工作

<html> 
    <head> 
     <script src="http://code.jquery.com/jquery.min.js"></script> 
     <script> 
      function showSuccess() { 
       $('#successDiv > p').empty().append("Saving the Device Whitelist was a success.<br />Server Resonse: Sucess"); 
       $('#successDiv').toggle().delay(4000).toggle(); 
      } 

      $(function() { 
       $('#successDiv').on('click', function() { 
        showSuccess(); 
       }) 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="successDiv" style="display:none"> 
      <p>Hello</p> 
     </div> 

     <input type="button" id="showSuccess" value="Show Success" /> 
    </body> 
</html>

出於某種原因切換是不工作...

這裏是jsfiddle

來源

2013-07-16 Callum Linington

什麼是預期的行爲？ – Adam

該div是爲了顯示4秒然後離開 –

第一個問題：你綁定點擊錯誤的元素;第二：它看起來像你應該設定明確的時序時使用delay：

function showSuccess() { 
    $('#successDiv > p').empty().append("Saving the Device Whitelist was a success.<br />Server Resonse: Sucess"); 
    $('#successDiv').toggle(100).delay(4000).toggle(100); 
} 

$(function() { 
    $('#showSuccess').on('click', showSuccess); 
});

Fiddle

UPD：與時序問題是一個jQuery的限制：在隊列中

只有後續事件都被延遲;例如，這將不延遲.show（）或.hide（）的無參數形式，其中不使用效果隊列。

（從delaydocumentation）

來源

2013-07-16 10:02:52 Tommi

是的，謝謝你，是否有理由不得不設置鏈接時的切換時間？ –

這是jQuery要求：>只有隊列中的後續事件被延遲;例如，這不會延遲不使用效果隊列的.show（）或.hide（）的無參數形式。（明白了[這裏]（http://api.jquery.com/delay/））。我添加這個註釋來回答未來的訪問者。 – Tommi

非常感謝您的幫助！ –

$('#successDiv').on('click', function() {

應該

$('#showSuccess').on('click', function() {

和

$('#successDiv').toggle().delay(4000).toggle();

應該

$('#successDiv').show(0).delay(4000).hide(0);

這裏的小提琴http://jsfiddle.net/L35rW/

來源

2013-07-16 09:58:22

仍然不工作 –

現在修復。對不起 –

這裏是工作示例：http://jsfiddle.net/js3E6/1/

$(function() { 
    $('#showSuccess').on('click', function() { 

     $('#successDiv > p').html("Saving the Device Whitelist was a success.<br />Server Resonse: Sucess"); 
     $('#successDiv').slideDown().delay(4000).slideUp(); 
    }); 
});

來源

2013-07-16 10:00:37 sdespont

如果刪除了最後一部分delay(4000).toggle();它的工作原理。 http://jsfiddle.net/582Z3/

$('#successDiv').toggle();

你遲到了什麼？

順便說一句，也改變點擊事件的ID爲$('#showSuccess')。

來源

2013-07-16 10:02:11

jQuery開發的簡單切換不工作

回答

相關問題