0

マウスオーバーとマウスアウトにフェードインフェードアウト効果を追加するには?

<script>
jQuery(function() {
 jQuery(".logo img").mouseover(function() { 
var src = "<?php echo $this->baseurl ?>/templates/kalfany/images/logo-<?php echo $this->language; ?>-hover.png";
 jQuery(this).attr("src", src);
}).mouseout(function() {
 var src = "<?php echo $this->baseurl ?>/templates/kalfany/images/logo-<?php echo $this->language; ?>.png";
 jQuery(this).attr("src", src);
}); });
</script>

ここから私の質問の答えを得ました

http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/

そして、これは私が探しているものですので、ベストアンサーは私のものです;）

4

3 に答える 3

0

このようなものを使用してください...

$('.logo img').hover(
  function(){
    $(this).fadeOut('slow');
  },
  function(){
    $(this).fadeIn('slow');
  }
);

しかし、完全にフェードアウトすると、hoverOutが自動的に呼び出されるため、機能しない可能性があると考えていました。画像の上にdivを追加して、divの代わりに画像を非表示にしてみてください。

于 2012-11-15T10:45:20.973 に答える
0

このように使用できます...

$(".logo img").mouseover(function() {
    $(this).fadeIn('fast');
}).mouseout(function () {
    $(this).fadeOut('fast');
});​
于 2012-11-15T10:48:49.707 に答える
0

ある種のクロスフェードを探していない場合は、使用できます

 jQuery("img").mouseover(function() { 
     var src = "http://www.josephmccaffery.com/wp-content/uploads/2011/04/logo_google_x-150x150.png";
     jQuery(this).fadeOut(300,function(){
         jQuery(this).attr("src", src).fadeIn();
     })
}).mouseout(function() {
     var src = "http://techteen.net/wp-content/uploads/2012/08/Google-Logo-Square.png";
     jQuery(this).fadeOut(300,function(){
         jQuery(this).attr("src", src).fadeIn();
     })
});

</p>

jsfddle

画像が読み込まれていない場合、不具合が発生することがあります。

于 2012-11-15T10:57:19.320 に答える