如何使隱藏的元素更快地彈出（jQuery / CSS）

Question

我做了一個搜索面板，它在頁面加載時是隱藏的。 當用戶單擊搜索圖標時，將彈出（彈出）作為帶有文本框的搜索表單。 但是使用當前代碼，盡管我沒有向CSS添加任何過渡，但搜索表單彈出的方式非常慢。 jQuery以下是否有問題而不是CSS問題？

  jQuery( ".search-icon" ).click(function() {    
    jQuery('.search-form').fadeIn(0);
    return false;   }); });

.search-form {
    display: none;
    clear: both;
    z-index: 2;
    position: absolute;
    right: 0; }

Answer 1

如果不需要任何動畫和無慢fadeIn則可以使用show而不是fadeIn 。

 jQuery(".search-icon").click(function() { jQuery('.search-form').show(); return false; }); 

 .search-form { display: none; clear: both; z-index: 2; position: absolute; right: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='search-icon'>icon</div> <div class='search-form'>search form</div> 

Answer 2

 jQuery(".search-icon").click(function() { jQuery('.search-form').toggle(); return false; }); 

 .search-form { display: none; clear: both; z-index: 2; position: absolute; right: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='search-icon'>icon</div> <div class='search-form'>search form</div> 

從W3Schools.com jQuery效果fadeOut（）方法 ：

fadeOut（）方法將選定元素的不透明度逐漸從可見更改為隱藏（漸變效果）。

 $(selector).fadeOut(speed,easing,callback); 

Answer 3

根據文件 ; fadIn的默認值為400毫秒。 您可以使用數字或字符串語句（快速或慢速）。 嘗試放置大於0的數字，我猜jQuery本身假設零值等於默認參數，因此它將給出400毫秒的延遲。