Convert Css3 Animation Into Jquery For Use In Ie8 And Above

I posted a this question yesterday and after 5 or more hours of fighting with IE8 just to hide the overlay text before the transition happened, I have decided that the only way to

Solution 1:

Here you go, you can tinker with the numbers if you want. I don't have IE so I can't test it but it should be good:

$(".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