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个缩略图组成，脚本将包装器和标题应用于所有现有的图库项目，但我只在第一个缩略图上获得悬停效果。

这是图库超文本标记语言的示例：

<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);
        }       
    );