0

コンテナーにカーソルを合わせると、このコンテナー内のすべての画像にこのホバー効果を適用するにはどうすればよいですか?

http://www.photoshop-plus.co.uk/2012/05/21/jquery-color-fade-hover-effect/

jQuery

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

CSS

<ul class="gallery">
<li>
<img src="images/01_grey.gif" class="grey" />
<img src="images/01_color.gif" class="color" />
</li>

<li>
<img src="images/02_grey.gif" class="grey" />
<img src="images/02_color.gif" class="color" />
</li>
</ul>
4

1 に答える 1

0

実装方法は次のとおりです：http：//jsfiddle.net/xEuD7/

CSSを実装し、JavaScriptプラグインをページにインポートする必要があることに注意してください。

.gallery li {
    float: left;
    margin-right: 20px;
    list-style-type: none;
    margin-bottom: 20px;
    display: block;
    height: 130px;
    width: 130px;
    position: relative;
}
img.grey {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}
img.color {
    position: absolute;
    left: 0;
    top: 0;
}

アップデート：

$(document).ready(function(){
    $("img.grey").hover(
    function() {
        $(this).parents('.gallery').find("img.grey").stop().animate({"opacity": "0"}, "slow");
    },
    function() {
        $(this).parents('.gallery').find("img.grey").stop().animate({"opacity": "1"}, "slow");
    });
});
于 2013-03-13T03:44:36.093 に答える