0

我试图为这个网站www.hellomonday.com上的工作部分构建一个 jquery 解决方案。

我已经构建了它，因此图像在悬停时会发生变化，并且当 div 仅在您看到它在运行时才会展开时，它看起来非常跳跃和抖动，特别是如果我的网站上有超过 1 行的工作。

您在顶部看到的图像，我想在悬停时更改，当单击并且 div 展开时，我希望图像随着我的 div 的高度而增长，并淡入第三张图像（您会在看到演示时理解） . 如果再次单击，图像应淡出到第一张图像并相应缩小。

演示

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);  
        };
    });

有人能想出更好的方法来构建它吗？

4

0 回答 0