jQuery + CSS畫廊懸停效果

Question

我在圖片庫時遇到了一些麻煩。 為了實現過渡效果，我有以下jQuery腳本：

var gallery=$("#galeria .one-third.column");

        var thumbs = $("#galeria .one-third.column a.fancybox img");        

        for (var c = 0, count = gallery.length; c < count; c++)
        {
            for (var i = 0, ii = thumbs.length; i < ii; i++)
            {
                if (thumbs[i].title && thumbs[i].title.length > 0)
                {   
                    var imgtitle = thumbs[i].title;
                    $(thumbs[i]).wrap('<div id="wrapperGal" />').after('<div class=\'caption\'><span class="title">' + imgtitle + '</span></div>').removeAttr('title');
                }                   
            }
        }
        $('#wrapperGal').hover(

            function()
            {
                $(this).find('img').toggleClass("galGrey");
                $(this).find('.caption').animate({opacity: "1"}, 300);
            },

            function()
            {
                $(this).find('img').removeClass("galGrey");
                $(this).find('.caption').animate({opacity: "0"}, 300);
            }       
        );

這樣做是找到畫廊，在畫廊圖像周圍應用包裝紙，將鼠標懸停在項目上時，它將變為灰度，並且在現有畫廊縮略圖的頂部將獲得一個標題div（帶有.caption類）。 畫廊由9個縮略圖組成，腳本將包裝器和標題應用於所有現有畫廊項目，但是我只在第一個縮略圖上獲得了懸停效果。

這是圖庫HTML的示例：

<div class="one-third column alpha">
        <a title="t1" class="fancybox" rel="group" href="../img/galeria/big1.jpg"><img src="../img/galeria/thumb1.jpg" title="t1"/></a>
        </div>

        <div class="one-third column">
        <a class="fancybox" rel="group" href="../img/galeria/big2.jpg"><img src="../img/galeria/thumb2.jpg" title="t2"/></a>
        </div>

        <div class="one-third column omega">
        <a class="fancybox" rel="group" href="../img/galeria/big3.jpg"><img src="../img/galeria/thumb3.jpg" title="t3"/></a>
        </div>

這是我得到的CSS：

    #wrapperGal{
    width:288px; 
    height:210px; 
    position:relative;
}

#wrapperGal img{
    -webkit-transition: 0.5s;  
    -moz-transition: 0.5s;  
    -o-transition: 0.5s;
    transition: 0.5s;
}

.galGrey{
    -webkit-filter: grayscale(100%);
}

.caption{
    height:190px;
    position:relative;
    top:20px;
    opacity:0;
    background-image:url(../img/galeria/thumbRoll.png);
}

.caption span.title{
    width:288px;
    height:190px;
    padding-top:157px;
    overflow:hidden;
    position:absolute;
    text-align:center;
}

知道為什么會這樣嗎？

Answer 1

因為您使用id作為包裝的選擇器。 相同的ID 不能應用於不同的元素。

工作演示： http : //jsfiddle.net/indream/QxuPm/

    for (var c = 0, count = gallery.length; c < count; c++)
    {
        for (var i = 0, ii = thumbs.length; i < ii; i++)
        {
            if (thumbs[i].title && thumbs[i].title.length > 0)
            {   
                var imgtitle = thumbs[i].title;
                $(thumbs[i]).wrap('<div class="wrapperGal" />').after('<div class=\'caption\'><span class="title">' + imgtitle + '</span></div>').removeAttr('title');
            }                   
        }
    }
    $('.wrapperGal').hover(

        function()
        {
            $(this).find('img').toggleClass("galGrey");
            $(this).find('.caption').animate({opacity: "1"}, 300);
        },

        function()
        {
            $(this).find('img').removeClass("galGrey");
            $(this).find('.caption').animate({opacity: "0"}, 300);
        }       
    );