0

jQueryの使い方を学び始めたばかりで、画像のフェードインとフェードアウトを試しています。画像の上にカーソルを置いたときに、画像を半分の不透明度にフェードしたいと思います。次に、画像からマウスを離すと、画像は完全に不透明に戻ります。現在、コールバック関数を使用して画像をフェードインしますが、マウスが画像を離れたときではなく、フェードアウトが発生した直後に実行されます。何が起こっているのかについてのヒントはありますか？

これが私のコードです：

$(document).ready(function(){
  $("img").mouseover(function(event){
    $(this).fadeTo("fast", 0.5, function(){
      $(this).fadeTo("fast", 1.0)}
    );
  });
});
4

9 に答える 9

3

これを試して

$(document).ready(function(){
    $("img").on('mouseover', function(event){
        $(this).fadeTo("fast", 0.5);
    }).on('mouseout', function(){
       $(this).fadeTo("fast", 1.0)    
    });
});​

デモ。

于 2012-09-07T04:33:02.500 に答える
3

で 2 つのイベントを使用できますon。非推奨hoverになるため、使用しないことをお勧めします。

$("img").on({
    mouseover: function() { $(this).fadeTo('fast', .5); },
    mouseout: function() { $(this).fadeTo('fast', 1); }
});​

http://jsfiddle.net/gT4vC/

于 2012-09-07T04:33:27.987 に答える
1

ここにクラスまたはID名がないと思います..

$("img").mouseover(function(event){

これの代わりに、$(".img").mouseover(function(event){

マウス オーバー イベントのクラスまたは ID を指定します。

于 2012-09-07T04:32:20.830 に答える
1

ユーザー.hover()関数は、2 つのパラメーターを受け入れます。1 つは mouseenter イベント用で、もう 1 つは mouseleave イベント用です。

$(document).ready(function(){
    $("img").hover(function(event){
         $(this).fadeTo("fast", 0.5);
      },
      function() {
         $(this).fadeTo("fast", 1.0);
      });
});

デモ

于 2012-09-07T04:32:25.837 に答える
0

これを試して：

$(document).ready(function() {
    $("img").mouseenter(function(event) {
        $(this).fadeTo("fast", 0.5);
    }).mouseleave(function() {
        $(this).fadeTo("fast", 1.0);
    });
});​
于 2012-09-07T04:32:30.147 に答える
0

デモ: http://jsfiddle.net/DTzTH/

$(document).ready(function () {
  $("img").hover(function () {
    $(this).fadeTo("fast", 0.5);
  }, function () {
    $(this).fadeTo("fast", 1.0);
  });
});​
于 2012-09-07T04:35:15.520 に答える
0

これはあなたが探しているものですか？上部の大文字の定数を変更して、必要な効果のタイミングを正しくします。

$(document).ready(function(){
    var FADEOUT_TIME = 500;
    var FADEIN_TIME = 500;
    $("img").on({
        mouseleave: function() {
            $(this).fadeTo(FADEIN_TIME, 1);
        },
        mouseenter: function() {
            $(this).stop().fadeTo(FADEOUT_TIME, 0.5);
        }
    });
});

デモ

于 2012-09-07T04:35:33.103 に答える
0

はい、あなたはそれを行うことができます 

$(document).ready(function(){
    $("img").on({
    mouseover: function() { $(this).fadeTo('fast', .8); },
    mouseout: function() { $(this).fadeTo('fast', 1); }
});
});

ここにjsフィドルがあります

アップデート

または、css プロパティを使用することもできますopacity 

$(document).ready(function(){
    $("img").mouseover(function(){
       $('img').css('opacity','0.4');
    });

    $("img").mouseout(function(){
       $('img').css('opacity','1');
    })
});

ここにjsフィドルがあるので

于 2012-09-07T04:36:11.760 に答える
0

これを試して

$(document).ready(function(){
  $(".main").mouseenter(function(event){
      $(this).fadeTo("fast", 0.5).mouseleave(function(){
              $(this).fadeTo("fast", 1.0);
      });
  });
});
于 2012-09-07T04:42:41.667 に答える