0

jQuery スクリプトを使用して、Web ページ上のすべての画像を 50% 不透明にしています。マウスを特定の画像の上に置く/ロールすると、その画像の不透明度が 100% に戻ります。

スクリプトの開始

$(document).ready(function(){
    $('a img').animate({
        opacity:.5
    });
    $('a img').hover(function(){
        $(this).stop().animate({opacity:1});
    }, function(){
        $(this).stop().animate({opacity:.5});
    });
});

スクリプトの終わり

ポートフォリオ/ギャラリーの画像で、このコードを Web ページで使用したいだけです。

このコードを Web ページ上の特定の画像セットに割り当てるにはどうすればよいですか? リンクのある他の画像には影響しません。例: Web ページの HEAD セクションにある jQuery コードによって、ロゴやリンク付きの他の画像が影響を受けることは望ましくありません。

現在、画像からリンクを削除して、探している結果を得ることができます。これはページの設定方法ではなく、一時的な修正にすぎません。

ご協力ありがとうございました！

4

4 に答える 4

1

この動作を持つ画像に特異性クラスを配置できます。

$(document).ready(function(){
    $('a img.classtoopacity').animate({
        opacity:.5
    });
    $('a img.classtoopacity').hover(function(){
        $(this).stop().animate({opacity:1});
    }, function(){
        $(this).stop().animate({opacity:.5});
    });
});
于 2013-07-30T19:10:17.133 に答える
1

あなたのギャラリーに「いいね！」があるとしましょidうid="gallery"

Pure CSS3:ライブデモ

#gallery a img{
    opacity: 0.5;

    -webkit-transition: opacity 0.4s;
        -ms-transition: opacity 0.4s;
         -o-transition: opacity 0.4s;
            transition: opacity 0.4s;
}
#gallery a img:hover{
    opacity: 1;
}

jQuery を使用した例: LIVE DEMO jQuery

$(function(){

    $('#gallery a img').animate({opacity:0.5}).hover(function( e ){
        $(this).stop().animate({opacity: e.type=="mouseenter" ? 1 : 0.5 });
    });

});

fadeTo([time],[opacity])次のような方法も使用できます。

$('#gallery a img').fadeTo(400,0.5).hover(function( e ){
    $(this).stop().fadeTo(400,e.type=="mouseenter" ? 1 : 0.5);
});
于 2013-07-30T19:13:17.150 に答える
0

影響を受けるイメージにダミー クラスを追加し、そのクラスを jQuery セレクターに含めることができます。したがって、class='hover-fade'画像に与える場合は、次を使用できます。

$(document).ready(function(){
    $('a img.hover-fade').animate({
        opacity:.5
    });
    $('a img.hover-fade').hover(function(){
        $(this).stop().animate({opacity:1});
    }, function(){
        $(this).stop().animate({opacity:.5});
    });
});

したがって、ロゴにはそのクラスが割り当てられていないため、スクリプトの影響を受けません。

于 2013-07-30T19:09:21.733 に答える
0

CSS と同じように、jQuery でもセレクターを使用できます。たとえば、あなたのギャラリーが

<div class="gallery"><a><img><a><img>...

現在のセレクターに追加するだけで、ギャラリー内のすべての画像をターゲットにすることができます。

$('.gallery a img')...

または、コードに合わせて (ギャラリーをラップするものを知らなくても):

$(document).ready(function(){
  $('.gallery a img').animate({
     opacity:.5
  });
  $('.gallery a img').hover(function(){
      $(this).stop().animate({opacity:1});
  }, function(){
      $(this).stop().animate({opacity:.5});
  });
});
于 2013-07-30T19:10:37.457 に答える