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

                    });

    });

2番目の問題は、これらの機能を「子」または「親」にする方法がわからないため、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 に答える