1

我正在尝试构建 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 制作单独的功能。

4

1 回答 1

0

我设法删除了每个包装器的重复代码：

// 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 仍然可以工作。

于 2012-10-30T11:56:56.527 回答