4

この部分のコードは、2 つの画像の間でフェードするように記述しました。以下にも少し説明があります。マウスがボックスに「ホバー」すると、テキストの色が変わり、画像が2番目の色にフェードします。

残念ながら、テキストの色の変更と画像のフェードに問題があります。マウスがボックス上にある場合、テキストの色は変更されますが、画像は2番目のものにフェードしません。

これは私が写真のフェードに使用するものです:

$("img.grey").hover(
  function() {
    $(this).stop().animate({"opacity": "0"}, "slow");
  },
  function() {
    $(this).stop().animate({"opacity": "1"}, "slow");
});

ヒントはありますか？

これがフィドルです：http://jsfiddle.net/IronFeast/BGKFN/26/

4

1 に答える 1

4

画像ではなく、リンクのホバー時に画像を変更します。

$(".box a").hover(
function() {
    $(this).find("img.grey").stop().animate({"opacity": "0"}, "slow");
},
function() {
    $(this).find("img.grey").stop().animate({"opacity": "1"}, "slow");
});

http://jsfiddle.net/BGKFN/28/

編集
または単に好き: http://jsfiddle.net/BGKFN/30/

$(".box a").hover(function( e ) {
    $(this).find("img.grey").stop().animate({opacity: e.type=="mouseenter"?0:1}, 800);
});

ここで、jQuery のhoverは の省略形ですmouseenter mouseleave。
つまり、現在のeイベントをターゲットにすると、2 つのうちの 1 つが取得され、aternary operator ( ? : )を使用して不透明度を0true の場合 (mouseenter の場合) および1false の場合 (mouseleave の場合) に設定します。

于 2013-06-25T15:56:41.910 に答える