0

私のウェブサイトで複雑な（私にとって）関数を書こうとしています。私は3行あり、それぞれに画像が含まれていました。ホバー時に、この画像の背景位置を変更したい、それだけです。ユーザーがこの画像をクリックすると、親 div の高さが拡大し、画像の高さが拡大し、その背景位置が変更されます。

この機能が完了したら、別の画像をクリックします. 前の画像を元のサイズに縮小したいと思います. これは説明が難しいので、jsfiddle デモを作成しました.

また、jqwuery を初めて使用するので、関数が肥大化しているように見えることを少し心配しています。これは悪い習慣ですか、それとも問題ないように見えますか?

// On work showcase click, expand area to show information
$('.work-showcase').click(function(){
    if ( !$(this).hasClass('active') ){
        $(this).addClass('active');
        $('.work-showcase').animate({height:'135px'}, 500);
        $(this).find('ul li').animate({height:'350px'}, 500);
        $(this).find('ul li').css({
            'background-position':'bottom left',
            'background-size' : 'auto auto'
        });         
        $(this).find('ul li img').animate({height:'350px'}, 500);
        $(this).animate({height:'400px'}, 500,function() {  
            $("html, body").animate({ scrollTop: $(this).offset().top });  
        });
    } else { return false;};
});

デモ

http://jsfiddle.net/mx4HJ/2/

4

1 に答える 1

0

1 つのヒント: jquery 要素が複数回使用されている場合は、常にキャッシュします (例:

var el = $(this), li = el.find('ul li');

他の質問については、activeクラスを追加する次の行を編集するだけです。

$(this).addClass('active').siblings().removeClass('active');

更新されたデモ

于 2013-01-08T17:26:13.610 に答える