Могу ли я использовать JQuery в подходящих детей - PullRequest
Новая
       27

Могу ли я использовать JQuery в подходящих детей

0 голосов
/ 11 июня 2019

Я пытаюсь сделать слайд-вход / выход элемента Child каждого элемента Grid.

Я пытался обработать $ .target.children [0] как элемент jQuery, чтобы использовать .show() и *Например, 1004 *. 

 /*--------- Product Card Overlay -------------------------------------*/

   $(".products-grid").children().hover(function ($) {

       /*------ MOUSE IN --------*/

       match an animate in the child element (div.overlay)

   }, function () {

       /*------ MOUSE OUT --------*/
       match an animate out the child element (div.overlay)
   });

/*--------- /Product Card Overlay ----------------------------------*/

На самом деле я застрял, и у меня разбился мозг.Кто-нибудь может дать мне подсказку о правильном пути?

1 Ответ

0 голосов
/ 11 июня 2019

Может быть, это поможет вам. Обратите внимание, что первый элемент имеет display:none, то есть если вам нужно, чтобы оверлей был изначально скрыт.

Вы можете использовать .toggleClass() с классом .active вместо .toggle(), если вам удобнее выполнять анимацию в css.

Надеюсь, это поможет! 

.products-grid {
  display: flex;
  flex-wrap: wrap;
  width: 75%;
  margin: 0 auto;
  
}
.products-grid .product {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 35%;
  max-width: 35%;
  background-color: red;
  margin: 0 7.5px 15px 7.5px;
  height: 200px;
  overflow: hidden;
}

.products-grid .product .prod-details {
  position: absolute;
  top: 100%;
  opacity: 0;
  margin: 0 auto;
  width: 50%;
  height: 50%;
  background-color: blue;
  transition: top .3s ease, opacity .3s ease;
}
.products-grid .product:hover .prod-details {
  opacity: 1;
  top: 25%;
}
<div class="products-grid">
  <div class="product">
    <div class="prod-details"></div>
  </div>
  <div class="product">
    <div class="prod-details"></div>
  </div>
  <div class="product">
    <div class="prod-details"></div>
  </div>
  <div class="product">
    <div class="prod-details"></div>
  </div>
  <div class="product">
    <div class="prod-details"></div>
  </div>
  <div class="product">
    <div class="prod-details"></div>
  </div>
  <div class="product">
    <div class="prod-details"></div>
  </div>
</div>
...