Javascript jQuery中的Buggy切换div，跳跃，不平滑

我正在尝试建立一个jquery解决方案来解决这个网站上的工作部分

我创建它是为了让图像在悬停时发生变化，当div只有在你看到它在运行时才会展开时，它看起来非常紧张和僵硬，特别是当我的站点上有超过1行的工作时

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

演示

---

有谁能想出一个更好的方法来建造它吗？

对我来说似乎没那么糟糕。你用的是什么浏览器？一个可能有影响也可能没有影响的建议是链接调用或缓存jQuery对象。您不断强制它再次搜索

$（this）。查找（'ul li'）

。做一次并缓存结果。抱歉@MattBurland我不是jQuery的最佳选择，所以我不确定如何缓存haha

var mystuff=$（this）。find（'ul li'）

。然后你可以做

mystuff.animate（…

和

mystuff.css（…

@Liam阅读这里来帮助你完成jQuery编码

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