jquery animate在chrome

Question

我计划用作模型的网页中有几个组件。 Here is the code in plunker。当视口很小，并且盒子放在彼此之下（手机视图）时，一切都运行良好。单击其中一个类别时，将按预期显示更多信息。

然而，在大视图中，这在Chrome中无法正常工作。出于某种原因，父元素跳了起来。我不知道是什么导致了这种行为，但令人惊讶的是它在FF和Internet Explorer上完美运行（是真的！）。

我已经搜索过stackoverflow，并且几乎在几年前遇到了动画问题。他们没有为我提出解决方案。我也尝试使用带有css动画的addClass和removeClass函数而不是使用animate（）函数，但是我已经得到了相同的结果！

javascript不是最好的（它在html代码之下），我知道这一点，但是我认为这是导致所有这一切的部分：

var menu = $(".menu-text"),
            aanbod = $(".aanbod-title"),
            ....

aanbod.click(function(){



            var parent = $(this).parents(".aanbod-widget"),
                curheight = parent.css("height"),
                vpWidth = $(window).width(),
                targetHeight = $(this).css("height");


            console.log("this parent", $(this).parent("aanbod-title-bg"));

            /*  Here it starts I think. If vpWidth is below 740, all is fine, probably because affects a different element in the DOM
 */
            if(vpWidth <= 740) {
                if(curheight === '120px') {
                    parent.animate({height:'515px'}, 250);
                }
                else{
                    parent.animate({height:'120px'}, 250);
                }
            }
            else{
                if(targetHeight === '515px') {
                    $(this).animate({height: '120px', 'line-height': '120px'}, 250);
                    $(this).parent(".aanbod-title-bg").animate({height: '120px'}, 250);

                }
                else{
                    $(this).animate({height: '515px', 'line-height': '511px'}, 250);
                    $(this).parent(".aanbod-title-bg").animate({height: '515px'}, 250);
                }
            }
        });

我该怎么做才能解决这个问题？我不知道出了什么问题。非常感谢！

编辑：我忘了提到这个事实：在一个大型视口中，单击一个类别然后跳转。然后稍微调整视口大小。一切都在正确的地方。很奇怪！因为我注意到了这一点，我也尝试触发假窗口调整大小，但这也不起作用。我真的很高兴它不起作用，因为它感觉像是一个肮脏的黑客。