启动第二个 div 时停止第一个 div 的动画

Question

我想创建动画悬停。在mouseover我需要淡出div，然后更改其内容背景和颜色，并再次显示它。mouseout把一切都放在以前的条件下。我的网页是

<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的动画时，我想停止第一个div的动画。

Answer 1

要停止动画，只需使用

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

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

当您悬停使用

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

退出元素时

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

Answer 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内容:)