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作为包装的选择器。相同编号不可以适用于不同的元素。

工作演示：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); 
     }  
    );