1

私は私のいくつかの正方形に少し問題があります。ユーザーがマウスオーバーするとフェードし、マウスアウトすると通常の不透明度に戻るはずです。問題は、マウスを離しても通常の不透明度に戻らないことです。これを修正するにはどうすればよいですか?

<div class="test"></div>

$('.test').each(function(){
    $(this).animate({'opacity': '1.0'}, 500);
    $(this).hover(function(){    
        $(this).stop(1).animate({'opacity': '1.0'}, 500);    
    }, function(){    
        $(this).stop(1).animate({'opacity': '0.6'}, 500)     // at the end of animation
    });
});

JS Binを作成しました

ヘルプ/チュートリアルをいただければ幸いです。

4

3 に答える 3

4

フェードの順番を間違えただけです。

$(this).hover(function(){    
    $(this).stop(1).animate({'opacity': '0.6'}, 500)     // hover over        
}, function(){    
    $(this).stop(1).animate({'opacity': '1.0'}, 500);    // hover out
});

ドキュメントから関数シグネチャを確認してください

hover( handlerIn(eventObject) , handlerOut(eventObject)  )

最初の関数はマウスが要素に入ったときの関数で、2 つ目はマウスが要素から離れたときの関数です。

于 2012-11-03T19:20:37.550 に答える
2

よりシンプルなソリューション

$('.test').hover(function() {
    $(this).stop().fadeTo(500, 1);
}, function() {
    $(this).stop().fadeTo(500, 0.6);
});​

フィドルhttp://jsfiddle.net/5R8Y9/

于 2012-11-03T19:25:52.030 に答える
2

このようなものをお探しですか？http://jsfiddle.net/wKApE/

$('.test').mouseenter(function(event){
  $(event.target).addClass('active');  
  $('.test').each(function(){
    if(!$(this).hasClass('active'))
    {
      $(this).stop(1).animate({'opacity': '0.6'}, 500); 
    }
  });
});
$('.test').mouseleave(function(event){
  $(event.target).removeClass('active');
  $('.test').each(function(){
  $(this).stop(1).animate({'opacity': '1'}, 500);
  });
});​
于 2012-11-03T19:38:22.937 に答える