jQuery隐藏并仅显示源文件

Question

我只使用jQuery库的一小部分：仅hide()和show()。

我已经看到了在JavaScript中等效的线程，但是jQuery版本上的动画真的很不错。我不知道只能只使用jQuery代码。

Answer 1

最佳的（就性能而言）进行简单的表演/隐藏功能是引入CSS类，例如

.hidden {
  display: none !important;
}

，如果您有此类，则可以使用classList属性在元素上切换它。这是一些用法。

element.classList.remove("hidden");
element.classList.add("hidden");
element.classList.toggle("hidden");

最大的优势之一是您不会失去原始的display。如果您已定义为inline-block，则使用block/none CSS方法将您的display重置为block。

Answer 2

使用简单的JavaScript显示和隐藏。

<div id="mydiv"></div>

将属性显示为无要隐藏的div

document.getElementById("mydiv").style.display="none";

将属性显示为块或任何其他显示div

document.getElementById("mydiv").style.display="block";

Answer 3

这是一些使用复选框，标签和列表的CSS动画，使用：

• transition
• transform: scaleY
• opacity
• max-height

这些规则组也可以应用于强调jQuery/javaScript动画。

摘要

dl {
  opacity: 0;
  max-height: 0;
  border: 3px ridge grey;
  transition: opacity 1.6s, max-height 1s, transform 1s;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
}
label {
  cursor: pointer;
}
#list1 {
  display: none;
}
#list1:checked + dl {
  opacity: 1;
  max-height: 2000px;
  border: 3px ridge grey;
  transition: opacity 1.6s, max-height 1s, transform 1s;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

<label for='list1'>List</label>
<input id='list1' type='checkbox'>
<dl>
  <dt>Title</dt>
  <dd>Item</dd>
  <dd>Item</dd>
  <dd>Item</dd>
  <dd>Item</dd>
  <dd>Item</dd>
  <dd>Item</dd>
  <dd>Item</dd>
  <dd>Item</dd>
</dl>