按设置的像素数切换砌体图像的高度

时间:2019-02-03 09:34:17

标签: jquery html css jquery-masonry

让我知道此查询的标题是否不清楚。相反,下面的代码摘录使单击的图像消失了。

我查看了code,该元素可在设置的像素数之间切换元素的高度。我已经审查了Desandro的masonry toggle代码。我已经审查了jquery documentation。尽管如此,我仍在努力实现解决方案。

我知道这对专家来说可能很简单,但是对于新手来说,可以理解一些指导。

i_stack

checked = id === selectedId

1 个答案:

答案 0 :(得分:1)

首先,toggle是指完全隐藏或显示的元素:

  

说明:显示或隐藏匹配的元素。

相反,请考虑使用您自己的切换逻辑来animate

var counter = 0;

$('.grid').on( 'click', '.grid-item', function() {
  // counter will toggle between 0 or 1
  let direction = ++counter % 2 === 1 ? "-=100px" : "+=100px";
  $(this).animate({ "height": direction }, "slow" );
});
.grid-item {
  background-color: blue;
  color: white;
  height: 150px;
  width: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid">
  <div class="grid-item"></div>
</div>

https://jsfiddle.net/qxb10rnv/