因此,我将清楚地解释一下,我想为列表添加动画,例如,当我单击文章时,这将隐藏所有其他元素,并且仅显示与该点击相关的所有文章

该内容在一开始就进行了比较,这是显示块的比例/无。

但是我不能为此设置动画,所以如果您有解决方案,我会考虑的!

我不在乎动画,我想了解原理。

谢谢

最佳答案

您可以使用jQuery隐藏元素,如建议的bdalina并仅显示被单击的article



// Hides all articles but the one clicked.
$('article').click(function(){
	$('article').slideUp();
  $(this).slideDown();
});

body {
  font-family: sans-serif;
  background: #003B93;
}

section {
  width: 200px;
  margin: 20px auto;
}

article {
  cursor: pointer;
  margin-bottom: 20px;
  text-align: center;
  background: #BABABA;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  width: 150px;
  padding: 20px;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <article>First article.</article>
  <article>Second article.</article>
  <article>Third article.</article>
  <article>Fourth article.</article>
  <article>Fifth article.</article>
</section>





也请have a look at this answer,它显示了解决该问题的另一种方法。

希望这会有所帮助。

关于javascript - 动画显示块/无,按比例显示,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45943466/

10-12 00:17
查看更多