Переключить высоту изображения кладки по заданному количеству пикселей при клике - PullRequest
Новая
       52

Переключить высоту изображения кладки по заданному количеству пикселей при клике

0 голосов
/ 03 февраля 2019

Дайте мне знать, если заголовок этого запроса неясен.Приведенный ниже фрагмент кода приводит к исчезновению изображения, по которому щелкнули.

Я рассмотрел код , который переключает высоту элемента между установленным количеством пикселей.Я просмотрел код Desandro masonry toggle .И я рассмотрел документацию jquery .Тем не менее, я изо всех сил пытаюсь найти решение.

Я ценю, что это может быть просто для экспертов, но для новичка было бы полезно какое-то направление.

i_stack 

$grid.on('click', '.grid-item', function() {
  $(this).toggle(
    function() {
      $(this).height($(this).height() + 100);
    },
    function() {
      $(this).height($(this).height() - 100);
    }
  );
});

1 Ответ

0 голосов
/ 03 февраля 2019

Прежде всего, Переключатель предназначен для полного скрытия или отображения элемента:

Описание: Отображение или скрытие соответствующих элементов.

Вместо этого рассмотрим 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/

...