Question

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

我已经构建了它，因此图像会在悬停时发生变化，当div扩展时，只有当你看到它在行动中时，它才显得非常跳跃和突出，特别是如果我的网站上有超过1行的工作。

你在顶部看到的图像，我喜欢在悬停时改变，当点击并且div扩展时，我希望图像与我的div高度一起增长，并淡入第3个图像（你会明白的时候）看演示）。如果再次单击，图像应淡入第一个图像并相应缩小。

样本

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

有人能想出更好的方法吗？

越野车在jQuery中切换div，跳跃，不顺畅

0 个答案: