Question

我正在尝试构建jQuery模块，在悬停时放大图像然后淡化它们的描述，最后模糊其余的不悬停图像。

我认为我几乎管理了模块功能的第一部分（在你的Stack中提供了很多帮助），但我在添加模糊脚本时遇到了问题。

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

我在下面添加了指向我的模块的链接：

这是代码的一部分。 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区域中，我已经将类“wrapper”添加到所有包装器中，但是我没有删除旧类，所以css仍然可以工作。

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

1 个答案: