因此,我将清楚地解释一下,我想为列表添加动画,例如,当我单击文章时,这将隐藏所有其他元素,并且仅显示与该点击相关的所有文章
该内容在一开始就进行了比较,这是显示块的比例/无。
但是我不能为此设置动画,所以如果您有解决方案,我会考虑的!
我不在乎动画,我想了解原理。
谢谢
最佳答案
您可以使用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/