jquery - JQUERY 显示隐藏在 CSS 上的 div

Question

也许我应该早点问这个……

我有一个从 sql 表中加载所有项目的 DIV。然后我有一些用于按颜色过滤的复选框，因此如果用户选择蓝色，则将重新加载 DIV，将蓝色作为颜色并仅显示蓝色项目。

一旦用户点击，我想在加载蓝色项目时显示一个“加载”.gif。也许它非常短，或者可能需要 3 秒左右......

我的选择是：

• 在我的主 DIV 中有另一个 DIV，其中包含 .gif 并且不显示 CSS。然后使用 JQUERY 我将不得不显示它然后隐藏它......如果这个选项很好，我可以使用什么样的 JQUERY？

• 在过滤后加载结果之前，使用 JQUERY 加载加载 DIV

谢谢！

Answer 1

最简单的方法是让页面中的 div，通常靠近页面底部，用 css 隐藏：

<div id="loading">
    <img src="img/loading.gif" alt="Loading." />
</div>

CSS：

#loading {
    display:none;
    /* some more code to position the div where you want */
}

js：

$("#loading").toggle(); // or .show() / .hide()

见小提琴：http: //jsfiddle.net/Gwmah/

Answer 2

jQuery 提供了几个有用的函数来显示 html 元素

• 隐藏（）显示（）

• 切换（）

  //your css would be like this
  #divToDisplay {
      display:none;
  }
  
  $('document').ready(function() {
  
      $('#divToDisplay').show();
  });
  
  //or to make it show hide on click use toggle()
  $('document').ready(function() {
  
       $('#divToDisplay').toggle();
  });
  
  //you can also use slideToggle() to give some animation for show and hide
  $('document').ready(function() { 
  
      $('#divToDisplay').slideToggle( "slow" );
  }