当第二个开始时停止第一个 div 的动画答案

【问题标题】：Stop animation of first div when second is started当第二个开始时停止第一个 div 的动画
【发布时间】：2012-11-22 08:07:15
【问题描述】：

我想创建动画悬停。在mouseover 上，我需要淡出 div，然后更改其内容背景和颜色，并再次显示。在mouseout 上将所有内容置于先前的状态。我的 HTML 是

<div class="icon-wrapper">
    <span class="icon like-icon"></span>
     like 
</div>
<div class="icon-wrapper">
   <span class="icon comment-icon"></span>
   comment 
</div>

还有我的 JavaScript 代码

$('.icon-wrapper').hover(
    function(){
        $(this).animate({opacity:0}{queue:true,duration:1000,complete:function() {
        $(this).find('.icon').css('backgroundPositionY','-56px');
        $(this).css('color','#dd3939');
        $(this).animate({opacity:1},{queue:true,duration:1000});
     }});
  },function(){
        $(this).animate({opacity:0},{queue:true,duration:1000,complete :function() {
        $(this).find('.icon').css('backgroundPositionY','-12px');
        $(this).css('color','#707173');
        $(this).animate({opacity:1},{queue:true,duration:1000});
  }});
});

我几乎得到了我需要的东西。唯一的事情是我想在开始第二个动画时停止第一个 div 的动画。

【问题讨论】：

你可以先停止动画，然后像 $(this).stop().animate(); 一样重新设置动画。
@Danis 我不明白第二个 div 的动画在哪里抱歉？你能显示 div 1 动画和 div2 动画吗？
@Danis 有机会为您的代码获得fiddle。这样我们就可以在工作中看到它，并且更容易理解。

标签： jquery animation hover queue

【解决方案1】：

要停止动画，只需使用

$(this).stop( true, true );

但是当涉及到样式时，使用 css 类可能更有意义

当你悬停时使用

$(this).addClass("active");

当你退出元素时

$(this).removeClass("active");

【讨论】：

【解决方案2】：

我认为您需要进行一些重构，当您有 fadeIn 和 fadeOut 方法可用时，为什么要使用动画不透明度？检查这个：

$('.icon-wrapper').on('mouseover',
    function(){
        $(this).fadeOut(1000,function() {
        $(this).find('.icon').css('backgroundPositionY','-56px');
        $(this).css('color','#dd3939');
        $(this).fadeIn(1000);
     });
  },function(){
        $(this).fadeOut(1000,function() {
        $(this).find('.icon').css('backgroundPositionY','-12px');
        $(this).css('color','#707173');
        $(this).fadeIn(1000);
  });
});

那么您可以使用stop(); 来停止事件，我希望您使用clone(); 来替换html 内容:)

【讨论】：

请问，为什么我必须使用clone()？
哦，也许我的问题在某些方面很糟糕，clone() 通常是复制和粘贴元素，如果您需要复制和粘贴，您可以使用它
你能显示你需要在哪里停止动画人吗？所以我可以帮助你