如何放大悬停图像并模糊其余部分？

Question

我想建立jQuery模块，放大图像上悬停然后淡入描述对他们和结束模糊其余不悬停的图像。

我想我几乎管理模块功能的第一部分（有很多堆栈的帮助），但我在添加模糊脚本时遇到问题。

我正在使用jquery.gaussian-blur.js，到目前为止它是我测试过的最好最快的脚本。

我已经添加了链接到我的模块如下：

http://jsfiddle.net/C6k9j/3/

而这里的部分代码。 HTML：

<div id="content"> 

<div class="wrapper"> 
<img class="imgblur" src="http://piotrbrzezinski.pl/test.jpg" width="247" height="173"/> 
<a href="#" class="description"> 
Content 
</a> 
</div> 

<div class="wrapper_two"> 
<img class="imgblur" src="http://piotrbrzezinski.pl/test.jpg" width="247" height="173"/> 
<a href="#" class="description_two"> 
Content 
</a> 
</div> 

<div class="wrapper_three"> 
<img class="imgblur" src="http://piotrbrzezinski.pl/test.jpg" width="247" height="173"/> 
<a href="#" class="description_three"> 
Content 
</a> 
</div> 

</div>​ 

jQuery的（每div.wrapper具有独立功能）：

// first DIV      
    $('.wrapper').hover(function(){ 

           $(this).stop().animate({ 

        width: 547, height: 383, margin: -100, 

        }, {duration: 100}).css({'z-index':'10000'}); 
     $('.wrapper > img').stop().animate({ 

       width: 547, height: 383 

        }, {duration: 100}); 

     $(this).children('.description').stop().fadeTo(500, 0.8); 


    $('.wrapper_two > img, .wrapper_three > img').stop().gaussianBlur({ 
       deviation: 3, //level of blur 
       imageClass: 'imgblur' //class of the original image (just in case)  
      }); 


    },function(){ 

     $('.wrapper_two > img, .wrapper_three > img').stop().gaussianBlur({ 
       deviation: 0, //level of blur 
       imageClass: 'imgblur' //class of the original image (just in case)  
      }); 

     $(this).children('.description').stop().fadeTo(50, 0); 
     $(this).stop().animate({ 

        width: 247, height: 173, margin: 0, 

        }).css({'z-index':'100'}); 
     $('.wrapper > img').stop().animate({ 

        width: 247, height: 173 

        });   
    }); 



    // secound DIV 

    $('.wrapper_two').hover(function(){ 

            $(this).stop().animate({ 

        width: 547, height: 383, margin: -100, 

        }, {duration: 100}).css({'z-index':'10000'}); 
     $('.wrapper_two > img').stop().animate({ 

       width: 547, height: 383 

        }, {duration: 100}); 
     $(this).children('.description_two').stop().fadeTo(500, 0.8); 
     $('.wrapper > img, .wrapper_three > img').stop().gaussianBlur({ 
       deviation: 3, //level of blur 
       imageClass: 'imgblur' //class of the original image (just in case)  
      }); 


    },function(){ 

     $('.wrapper > img, .wrapper_three > img').stop().gaussianBlur({ 
       deviation: 0, //level of blur 
       imageClass: 'imgblur' //class of the original image (just in case)  
      }); 

     $(this).children('.description_two').stop().fadeTo(50, 0); 
     $(this).stop().animate({ 

        width: 247, height: 173, margin: 0, 

        }).css({'z-index':'100'}); 
     $('.wrapper_two > img').stop().animate({ 

        width: 247, height: 173 

        }); 

    }); 

谢胜利，问题是，我不知道如何让这些功能的 “孩子” 或 “父母”，所以我必须为每个DIV制作单独的功能。

Answer 1

我设法去掉重复的代码为每个包装：

// first DIV      
$('.wrapper').hover(function(){ 
    $('.wrapper').addClass('notSelected'); 
    $(this).removeClass('notSelected'); 

    $(this).stop().animate({      
       width: 547, height: 383, margin: -100,      
       }, {duration: 100}).css({'z-index':'10000'}); 
    $(this).find('img').stop().animate({      
      width: 547, height: 383      
       }, {duration: 100}); 

    $(this).children('.description').stop().fadeTo(500, 0.8); 


$('.notSelected').find('img').stop().gaussianBlur({ 
      deviation: 3, //level of blur 
      imageClass: 'imgblur' //class of the original image (just in case)  
     }); 


},function(){ 

    $('.notSelected').find('img').stop().gaussianBlur({ 
      deviation: 0, //level of blur 
      imageClass: 'imgblur' //class of the original image (just in case)  
     }); 

    $(this).children('.description').stop().fadeTo(50, 0); 
    $(this).stop().animate({      
       width: 247, height: 173, margin: 0,      
       }).css({'z-index':'100'}); 
    $(this).find('img').stop().animate({      
       width: 247, height: 173      
       });   
    $('.notSelected').removeClass('notSelected'); 
}); 


​Here is jsFiddle: http://jsfiddle.net/C6k9j/8/ 

在我已经添加了类“包装”的所有包装的HTML范围，但我并没有删除旧的类，这样的CSS仍然可以工作。