シンプルなJQueryフェードイン/アウト

Question

私がやっていることは、アニメーションを持つdivを取得して、ボタンをホバーするときだけ表示されることです。ページが表示されるまでdivを非表示にしておき、マウスがボタンをホバーしなくなったら表示されないようにしたい。 また、私はJQueryでこれをやりたいのですが、それはあまりにも長い間それを遠くに保っているからです。

のjQueryコード：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){   
     $('#about').hover(function(){ 
      $('#about_hover').stop(true, true).animate({ 
       width: '150px', 
       opacity: '0.8', 
      }, 300); 
     }, function(){ 
      $('#about_hover').animate({ 
       width: '0px', 
       opacity: '0', 
      }, 300); 
     }); 
    }); 
</script> 

HTMLコード：

<div id="about_hover"> 
    <img src="images/hover.gif"> 
</div> 
<a href="about.html" id="about"><img src="images/menu/about.png"></a> 
<br> 

CSS：

#about_hover { 
    text-align: right; 
    width: 150px; 
    float: left; 
    margin: 5px 0px 0px 100px; 
    overflow: hidden; 
} 

でも、私はいくつかの問題を取得しています。まず、div内の画像は100％の不透明度で読み込まれ、初めてホバーしたときには80％にしかなりません。その後、そのようになって消えてしまいますが、ボタンを動かすと再び表示されません。

どのような考えですか？ ありがとう！ ありがとう！

Answer 1

正直なところ、それはjQueryのonこのような状況でを使用するのが最善です。..あなたのコードは次のようになります：

$("selector").on({ 

mouseenter: function() { 
//fade in goes here 
}, 

mouseleave: function() { 
//fade out goes here 
} 
}); 

ホバーはクールですべてですが、物事はホバートグルで乱雑得ることができます。 onはこれを簡単にします。また、あなたの不透明度については、おそらくfadeToを代わりに使用します。

Here is the on documentation.

Answer 2

Hereあなたのコードですが、少しは修正：

JS：

$('#about_hover').width(0);   
$('#about').hover(function(){ 
      $('#about_hover').stop(true, true).animate({ 
       width: '150px', 
       opacity: '0.8', 
      }, 300); 
     }, function(){ 
      $('#about_hover').animate({ 
       width: '0px', 
       opacity: '0', 
      }, 300); 
     });​ 

はHTML：fadeToまたはfadeToogleの使用についてどのように

<a href="about.html" id="about"><img src="http://www.placekitten.com/20/20/"></a><br> 
<div id="about_hover"><img src="http://www.placekitten.com/80/80/"></div> 

Answer 3

？

ここでは、fadeToを使用して作成された小さなスニペットです：http://jsbin.com/agojux？
あなたはそれを見ることができますhere