jquery最小執行時間

我用加載動畫構建了一個簡單的顯示/隱藏腳本。但我希望加載動畫至少0.5秒。jquery最小執行時間

<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#loading').hide(); 
     $('#notesunlimitedcontent').hide(); 
     $('#notescontent').show(); 

     $('a#nsetcontent').click(function() { 
      $('#loading').show(); 
      $('#notesunlimitedcontent').hide(); 
      $('#notescontent').show(); 
      $('#loading').hide(); 
     }); 


     $('a#nusetcontent').click(function() { 
      $('#loading').show(); 
      $('#notescontent').hide(); 
      $('#notesunlimitedcontent').show(); 
      $('#loading').hide(); 
     }); 

    }); 
</script> 


<a id="nsetcontent" href="#">show</a> 
<a id="nusetcontent" href="#">show</a> 


<div id="loading"> 
    <img src="loading.gif"/> 
</div> 
<div id="notescontent"> 
</div> 
<div id="notesunlimitedcontent"> 
</div>

所以它看起來像這樣，我不知道如果我這樣做是正確的代碼，因爲我是新來的jQuery。但我已經測試過了，它確實顯示並隱藏了兩個div，但我沒有看到加載div發生這種情況，也許是因爲它發展得很快？

我希望有人能解釋我如何讓加載時間是ATLEAST 0.5秒。

謝謝！

來源

2013-08-25 Anonymous

其中一個原因就是這些操作都不需要那麼多時間......因爲您在同一個線程中顯示和隱藏元素，因此在瀏覽器獲得重繪它之前該元素將被隱藏 –

我終於得到它與超時工作：

setTimeout(function() { 
     // Do something after 0.5 seconds 
}, 500);

所以jQuery代碼看起來像現在這樣：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#loading').hide(); 
     $('#notesunlimitedcontent').hide(); 
     $('#notescontent').show(); 

     $('a#nsetcontent').click(function() { 
      $('#loading').show(); 
      setTimeout(function() { 
       $('#notesunlimitedcontent').hide(); 
      }, 500); 
      $('#notescontent').show(); 
      setTimeout(function() { 
       $('#loading').hide(); 
      }, 500); 
     }); 


     $('a#nusetcontent').click(function() { 
      $('#loading').show(); 
      setTimeout(function() { 
       $('#notescontent'). 
      }, 500); 
      $('#notesunlimitedcontent').show(); 
      setTimeout(function() { 
       $('#loading').hide(); 
      }, 500); 
     }); 

    }); 
</script>

爲了解釋我想要的動畫，我有一個具有一個DIV透明背景幷包含顯示加載.gif的圖像。這應該覆蓋已更改的內容。

但是，大家都感謝快速回復！

來源

2013-08-26 10:00:30 Anonymous

.show和.hide不會生成動畫，除非您通過christian在評論中建議的可選參數。

要使用淡入淡出效果，您可以使用.fadeIn和.fadeOut。，其接受用於speed一個可選參數（和接受一些常量等slow，fast）。

來源

2013-08-25 14:02:43

顯示/隱藏函數也允許你傳遞一個持續時間參數給動畫（http://api.jquery.com/show/） –

用途：

.show('slow'); 

.hide('slow');

.fadeIn('slow');//instead of show() 

.fadeOut('slow');// instead of hide

而不是 'slow'，你可以給數值也將被視爲毫秒。

例如：.show(1000)等等。

乾杯

來源

2013-08-25 14:03:47

您可以使用

.show(5000); 
.hide("slow");

也許這將讓你看到是怎麼回事。

來源

2013-08-25 14:06:12 kilkadg

可以使用

.hide(500);和.show(500);

.slideUp(500);和。 slideDown(500);

.fadeOut(500);和.fadeIn(500);

來源

2013-08-25 14:06:44

我覺得這個最好的方法爲現代瀏覽器是使用css transitions，然後就明確地改變了元素的不透明度。所以，如果不是做這樣的事情$('#loading').show()你可以做$('#loading').css('opacity', 1)，如果你想隱藏的元素你會做同樣的事情，除了通0第二對Arg的CSS（）。

然後在你的CSS文件，你可能要做出「.fadeable」類，您可以用不同的元素重用像這樣：

.fadeable { 
    -webkit-transition: opacity 500ms linear 
    -moz-transition: opacity 500ms linear 
    -o-transition: opacity 500ms linear 
    transition: opacity 500ms linear 
}

然後，只需連接這些類要淡出這樣的元素作爲＃loading和#notescontent。在fadeIn（）/ fadeOut（）上使用轉換的優點是通過使用瀏覽器本地動畫引擎獲得了重要的性能改進，並且它釋放了js計時器來處理它必須執行的其他任務，而不是隻需要執行動畫事件。但是，如果您需要支持舊版瀏覽器和IE9，那麼將倒退到是jQuery的動畫方法的好主意。

來源

2013-08-25 14:24:54

jquery最小執行時間

回答

相關問題