为什么JQuery函数自己移动元素

我不明白为什么

mouseleave（）

正在移动元素。

.card

的原始宽度值是

25%

，在

mouseleave（）

上，它仍然是

25%

。将鼠标移到卡上时，卡正在移动。 HTML

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

---

编辑：更新的提琴：

您应该添加鼠标输出功能。有时，鼠标不能正常工作

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

---

你应该添加鼠标出功能。有时，鼠标不能正常工作

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

---

您的小提琴在mouseleave处理程序中以

{'width'：'100%}

为动画，这与您在此处显示的相反。我认为这是因为您正在告诉jquery执行此操作，而害羞正在移动，当您应该告诉它执行此操作时，如果不是25%，您指的是glitchy动画，当您不单击元素时，只需悬停/离开元素，使宽度改变一会儿，对吗？在总是将动画触发回25%

$（'.card'）之前，我尝试检查其中一张卡是否处于特定状态。单击（function（）{$（'.card'）。而不是（$（this））。动画（{'width'：'10%}，400）；$（this）。动画（{'width'：'70%}，400）；$（this.addClass（'show-text'）；}）$（'.card'）.mouseleave（function（）{$（'.card'）.css（{'width'：'25%}，400）；//删除动画}）

我想这可能会对你有所帮助，但在这里，我删除了鼠标上的动画，将你的小提琴动画放到mouseleave处理程序中的

{'width'：'100%}

，与你在这里显示的相反。我想这是因为你告诉jquery去做，而害羞正在移动，如果不是25%，你应该告诉它去做，你的意思是glitchy动画，当你不点击元素时，只需悬停/离开元素，让宽度改变一会儿，对吗？在总是将动画触发回25%

$（'.card'）之前，我尝试检查其中一张卡是否处于特定状态。单击（function（）{$（'.card'）。而不是（$（this））。动画（{'width'：'10%}，400）；$（this）。动画（{'width'：'70%}，400）；$（this.addClass（'show-text'）；}）$（'.card'）.mouseleave（function（）{$（'.card'）.css（{'width'：'25%}，400）；//删除动画}）我想这可能会对你有所帮助，但在这里我删除了鼠标左键上的动画是的，这就解决了它。非常感谢，先生。我会克制自己不再使用鼠标：）是的，这就解决了它。非常感谢，先生。我会克制自己不再使用鼠标：））
$('.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');
 });