-4

アニメーションのホバーを作成したい。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});
  }});
});

必要なものはほぼ手に入る。唯一のことは、2 番目のアニメーションを開始するときに、最初の div のアニメーションを停止したいということです。

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

次に、イベントを停止するために使用できます。html コンテンツを置き換えるためにstop();使用することを願っています :)clone();

于 2012-11-22T08:17:15.173 に答える