我正在尝试实现以下最终结果：在页面加载时，有一个带有标题（或图像、某些元素等）的内容框。当您将鼠标悬停在此内容框上时，原始内容会淡出，并被新内容替换。此外，该框将通过动画放大。在鼠标移出时，内容框将在页面加载时通过淡出新内容、淡入旧内容并将内容框返回到其原始高度来恢复其原始状态。
我所做的确实有效，但它不是防弹的。您可以将鼠标悬停在该框上，鼠标悬停，然后再次将鼠标悬停在该框上，它将以原始高度显示该框并带有新内容。
我试图找出一种防弹的方法来做到这一点，并让它在 IE8+/Chrome/Safari/Firefox 中工作。必须有一些我忽略的简单方法来完成此操作，但我在寻找一种好方法时遇到了一些麻烦。
我尝试向元素添加一个动画类，动画完成后将其删除，然后setTimeout在 400 毫秒后检查该类是否仍然存在，但我在 IE8 中使用该方法时遇到了一些问题。
不太确定我可以尝试的其他任何事情，如果有人有任何建议，我将非常感谢您的帮助。
提供的 JSFiddle 提供了我正在尝试做的基本想法。我只是在寻找一种防弹的方法来做到这一点。
JSFiddle：http: //jsfiddle.net/Ur78U/1/