Question

我想创建动画悬停。在mouseover我需要fadeOut 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的动画。

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内容：）

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

2 个答案: