-4

I want to create animated hover. On mouseover I need to fadeOut div, then change its content background and color, and show it again. And on mouseout put everything in the previous condition. My HTML is

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

and my javaScript code

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

I get almost what I need. The only thing is that I want to stop animation of first div when I'm starting the animation of second.

4

2 回答 2

0

要停止动画，只需使用

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

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

当你悬停使用

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

当你退出元素

$(this).removeClass("active");
于 2012-11-22T08:11:06.327 回答
0

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

于 2012-11-22T08:17:15.173 回答