1

リストから画像をホバーすることで0に設定された画像の不透明度を実行する単純なjqueryスクリプトを見つけました。私はこの効果が好きですが、それはulパックされたギャラリーの1つの画像でしか機能しません。私の答えは、jqueryにどのように言うことができますか？ギャラリーdiv / ulにカーソルを合わせると、画像がリストリストにあるul内のすべての画像に対してこれを行うことができますか？

編集：ここでは、グレーとカラーの2つのクラスを使用します。グレークラスの画像の下には、カラークラスの画像があります。灰色のクラスは0に設定され、カラー画像が表示されます。これは、そのリストから1つの画像をホバーするために引き続き機能しますが、gallery_containerdivまたはulgalleryをホバーすることで、すべての画像にこの効果を同時に適用したいと思います。誰かがこれに適したjqueryを書く方法を手伝ってもらえますか？

HTML

<div class="gallery_container">
    <ul class="gallery">
        <li> <a href="#"><img src="images/01_grey.gif" class="grey" /></a>
            <img src="images/01_color.gif" class="color" />
        </li>
        <li> <a href="#"><img src="images/02_grey.gif" class="grey" /></a>
          <img src="images/02_color.gif" class="color" />
        </li>
    </ul>
</div>

jQuery

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

CSS

.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;
}
4

4 に答える 4

0

試す。

$(".gallery_container").hover(
function()
{
    $(this).find('img').stop().animate({"opacity": "0.5"}, "slow");
},
function()
{
    $(this).find('img').stop().animate({"opacity": "1"}, "slow");
});

見るFiddle

于 2013-03-13T04:20:28.397 に答える
0

これが更新JavaScriptです：

$(document).ready(function(){
  $('.gallery').hover(function() {
    $('.gallery img').stop().animate({"opacity": "0"}, "slow");
  }, function() {
    $('.gallery img').stop().animate({"opacity": "1"}, "slow");
  });
}
于 2013-03-13T04:21:39.320 に答える
0 
Try something like this:    

$('ul.gallery li a img.grey').hover(function(e){
e.preventDefault();
...
...
});
于 2013-03-13T04:35:44.967 に答える
0

-編集-

OPの望ましい効果は、不透明度ではなく、グレースケール<->カラーです。

OPの参照：http ：//themes.quemalabs.com/elitist/

更新されたフィドル：http：//jsfiddle.net/bwbNH/

OP、

私の理解では、ユーザーがいずれかの画像にカーソルを合わせるたびに、すべての画像をフェードアウトする必要があります。私はあなたのユースケースを知りませんが、それは正確に標準ではないので、これは混乱するかもしれません。いずれにせよ、イベントを親にバインドし、アニメーションをその子に割り当てることをお勧めします。ul.gallery$(this).children('li')

フィドル： http： //jsfiddle.net/KaZFL/

JS

$(document).ready(function () {
    $(".gallery").mouseenter(function () {
        $(this).children('li').stop().animate({
            "opacity": "0"
        }, "slow");
    }).mouseleave(function () {
        $(this).children('li').stop().animate({
            "opacity": "1"
        }, "slow");
    });
});
于 2013-03-13T04:41:43.890 に答える