jquery - 为什么 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

你应该添加鼠标悬停功能。有时 mouseleave 无法正常工作

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');
 });