Почему функция JQuery перемещает элементы самостоятельно

Question

Я не понимаю, почему mouseleave() это движущиеся элементы. Исходное значение ширины .card равно 25%, а на mouseleave() оно равно 25%. При наведении мыши на карты, карты движутся. HTML

 <div id="section">
  <div class="card-container">
    <div class="card"></div>
     <div class="card"></div>
      <div class="card"></div>
       <div class="card"></div>
  </div>
</div>

CSS

 body {
  background: #20262E;
  font-family: Helvetica;
}

#section {
  width: 100%;
  height: 100vh;
  background-color: white;
}
.card-container {
  width: 90%;
  margin: 0 auto;
  display: flex;
}
.card {
  width: 25%;
  height: 300px;
  border: 1px solid black;
  background-color: #ccc;
  margin: 25px 10px;
}

Jquery

$('.card').click(function() {
    $('.card').not($(this)).animate({'width':'10%'}, 400);
    $(this).animate({'width':'70%'}, 400);
    $(this).addClass('show-text');
});
$('.card').mouseleave(function() {
    $('.card').animate({'width':'25%'}, 400);
});

РЕДАКТИРОВАТЬ: Обновлено Fiddle: https://jsfiddle.net/f4hkcjem/5/

Answer 1

Вы должны добавить указатель мыши. иногда указатель мыши не работает должным образом

Jquery

$('.card').click(function(){
    $('.card').not($(this)).animate({'width':'10%'}, 400);
    $(this).animate({'width':'70%'}, 400);
    $(this).addClass('show-text');

});
$('body').on( 'mouseout','.card.show-text',function(){
      $('.card').animate({'width':'25%'}, 400);
       $(this).removeClass('show-text');
 });