将 CSS3 动画转换成 JQuery 用于 IE8 及以上版本答案

【问题标题】：Convert CSS3 animation into JQuery for use in IE8 and above将 CSS3 动画转换成 JQuery 用于 IE8 及以上版本
【发布时间】：2014-01-06 01:19:13
【问题描述】：

我昨天发布了this question，在与 IE8 战斗 5 小时或更长时间后，只是为了在转换发生之前隐藏覆盖文本，我决定解决此问题的唯一方法是将其转换为 JQuery。我有一个 css 动画，我需要切换到 jquery 或 javascript，因为 IE8 在 hover 发生之前显示覆盖文本。因为 CSS 很长，所以我做了这个JSFiddle。 css 转换发生在第 25 和 44 行。

【问题讨论】：

您的问题到底是什么？你试过转换它吗？你在哪里卡住了？
问题是如何转换它。我没有尝试过，因为我不知道从哪里开始。我唯一尝试过的就是让覆盖文本在 IE8 转换之前隐藏。
@Blender 冷静下来，伙计......他做了很多出色的 CSS 工作，我在这里看到有人在寻求帮助将 CSS 转换为 jquery 的几个问题。看这个问题：stackoverflow.com/questions/12449887/…
@Skullomania 您是否尝试过昨天发布给您的建议？会发生什么？
出于某种原因，它所做的只是用红色为覆盖文本添加下划线。就像我之前提到的那样，我在昏倒前玩了 5 个小时左右，而且我不是 JQuery 专家。但是我确实看到其他人发布问题以帮助其他人转换他们的 CSS。我并不是有意冒犯或试图冒充我的工作，正如上面提到的那样。

标签： javascript jquery html css

【解决方案1】：

在这里，您可以根据需要修改数字。我没有IE，所以我无法测试它，但它应该很好：

$(".cascade-t1").hover(function(){
    $(".cascade-corner").fadeOut();
    $(".overlay-t1").animate({"left": "-300px"}, 300, function(){
        $(".cascade-overlay-content").fadeIn(200);    
    });


}, function(){

   $(".cascade-corner").fadeIn();
   $(".cascade-overlay-content").fadeOut(200, function(){
       $(".overlay-t1").animate({"left": "130px"}, 300);    
    });

});

JSFIDDLE

【讨论】：