如何让隐藏的元素更快弹出 (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

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 Effect fadeOut() Method：

The fadeOut() method gradually changes the opacity, for selected elements, from visible to hidden (fading effect).
$(selector).fadeOut(speed,easing,callback);

Answer 2

如果您不需要任何动画和不缓慢，您可以使用 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 3

根据documentation； fadIn 的默认值为 400 毫秒。您可以使用数字或字符串语句（快或慢）。尝试将数字设置为大于 0，我猜 jQuery 本身假设零值等于默认参数，因此它会延迟 400 毫秒。

如何让隐藏的元素更快弹出 (jquery/ css)

how to make hidden elements to pop up faster (jquery/ css)

javascript

css

jquery

transition