1

私の意図は、画像を素敵なフェード効果に置き換えることでした。背景として1つの画像Aがあります。マウスホバーで、画像Bのフェードイン。マウスアウトすると、画像BがfadeOutになり、画像Aが再び表示されます。私はこのコードを使用しています：

<script type='text/javascript'>
    $(function() {
            $("img.fade")
                .mouseover(function() { 
                $(this).fadeOut(2000);                          
                })
                .mouseout(function() {
                $(this).fadeIn(2000);                                   
                });
    });     
</script>

ただし、問題は、ユーザーがホバーしたままの場合、ループを継続することです（fadeIn、fadeOut、fadeIn、fadeOut ..）。フェードフィニッシュ時にそれが保持されるようにしたい。ユーザーがマウスを外したとき、ちょうどその時、私は新しいフェードが起こることを望みます。ありがとう！

psこれは2つの画像を使用するための動作コードです。これは問題の別の解決策であり、質問が解決された後にこれを広告します。

<script type='text/javascript'>
$(function() {

  $('img.fade').hover(function() {
    var src = $(this).attr("src").match(/[^\.]+/) + "_over.jpg";
    $(this)
      .animate({opacity:0},0)
      .attr('src',src)
      .stop()
      .animate({opacity:1},1000);
  }, function() {
    var src = $(this).attr("src").replace("_over", "");
    $(this)
      .animate({opacity:0},0)
      .attr('src',src)
      .stop()
      .animate({opacity:1},500);
  });
});
</script>
4

5 に答える 5

0

他の人のためにもここに導かれます

Google+(Ignorance||rum) = me.

mouseenter + mouseleaveは、うまくいくと思われる奇妙なセミループ動作に役立つ可能性があります。

var someElements = $('div.event-cell');

            someElements.mouseenter(function () {
                var targets= calEvents.not(this);
                targets.fadeTo(1000, 0.3);
            }).mouseleave(function () {
                var targets = someElements.not(this);
                targets.fadeTo(1000, 1);
            });

マウスオーバーとマウスアウトは、想像以上に包括的であるようです。たとえば、マウスアウトには子要素が含まれています。

I think = layman's opinion after rum :)

デモセクションhttp://api.jquery.com/mouseover/を参照してください

于 2011-10-30T07:38:43.350 に答える
0 
$(function() {
  var img = ['imageA.jpg','imageB.jpg'] 
  $('img.fade').hover(function() {
    $(this)
      .animate({opacity:0},0)
      .attr('src',img[1])
      .stop()
      .animate({opacity:1},1000);
  }, function() {
    $(this)
      .animate({opacity:0},0)
      .attr('src',img[0])
      .stop()
      .animate({opacity:1},1000);
  });
});

ここで試すことができます

参照： .hover（）、. stop（）

于 2010-09-15T16:11:57.100 に答える
0

このコードを試してください：

 $(function() {
        $("img.fade")
            .mouseover(function() { 
            $(this).fadeTo('2000', 0);                          
            })
            .mouseout(function() {
            $(this).fadeTo(2000, 1);                                   
            });
});  ​

問題は、fadeOut（）関数が要素のdisplayプロパティをnoneに設定するため、DOMはマウスが要素と相互作用していないと判断し、fadeIn（）関数を呼び出すことです。継続的にループします。およびfadeTo関数は不透明度を変更しますが、実際には画像がうまく機能するわけではありません。持続時間と不透明度の2つのパラメータが必要です。

于 2010-09-15T15:36:38.090 に答える
0

フェードアウトすると画像が消え、マウスアウト機能がトリガーされるようです。.01不透明度にアニメートしてみてください。

于 2010-09-15T15:38:46.560 に答える
0

画像を動的に切り替えたくなく、本当に背景画像を使い続けたい場合は、イベントバブリングを利用できます...

HTML：

<div class="myClass" style="background: url(imageA.jpg);">
    <img src="imageB.jpg" />
</div>

jQuery：

$('.myClass').hover(function(){
    $(this).find('img').fadeOut(2000);
}, function(){
    $(this).find('img').fadeIn(2000);
})

テストされていないので、動作するかどうかをお知らせください。

于 2010-09-15T16:23:51.253 に答える