javascript - jQueryのバギートグルdiv、ジャンプ、スムーズではない

Question

このウェブサイトwww.hellomonday.comの作業セクションにjqueryソリューションを構築しようとしています。

私はそれを構築したので、ホバーすると画像が変化します。特に、サイトに1行以上の作業がある場合は、実際に動作しているのを確認した場合にのみdivが拡大すると、非常にぎくしゃくしたように見えます。

上部に表示されている画像、ホバーで変更したいのですが、クリックしてdivを拡大すると、画像はdivの高さとともに成長し、3番目の画像にフェードインします（デモを見るとわかります） 。もう一度クリックすると、画像は最初の画像にフェードアウトし、それに応じて縮小されます。

デモ

http://jsfiddle.net/fRfd4/1/

// On work showcase click, expand area to show information
    $('.work-showcase').click(function(){
        if ( !$(this).hasClass('active') ){
            $(this).addClass('active');
            $(this).find('ul li').animate({height:'350px'}, 500);
            $(this).find('ul li').css({
                'background':'url("http://www.placekitten.com/502/135")'
            });         
            $(this).find('ul li img').animate({height:'350px'}, 500);
            $(this).animate({height:'650px'}, 500,function() {  
                $("html, body").animate({ scrollTop: $(this).offset().top });  
            });
        } else { 
            //return false;
            $(this).removeClass('active');
            $(this).find('ul li').animate({height:'120px'}, 500);
            $(this).find('ul li').css({
                'background':'url("http://www.placekitten.com/500/135")'
            });         
            $(this).find('ul li img').animate({height:'120px'}, 500);
            $(this).animate({height:'130px'}, 500);  
        };
    });

誰かがこれを構築するためのより良い方法を考えることができますか？