-1

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 fix the issue is to convert it to JQuery. I have a css animation that I need to change over to jquery or javascript because IE8 displays the overlay text before the hover occurs. Because the CSS is quite lengthy I made this JSFiddle. The css transitions occur on lines 25 and 44.

Community
  • 1
  • 1
Skullomania
  • 2,225
  • 2
  • 29
  • 65
  • What exactly is your question? Have you tried converting it? Where did you get stuck? – Blender Jan 05 '14 at 16:32
  • the question is How do I convert it. I have not tried because I do not know where to start. The only thing I have tried is getting the overlay text to hide before the transition in IE8. – Skullomania Jan 05 '14 at 16:36
  • @Blender calm down dude...hes done plenty of work that is some brilliant CSS and I have seen several questions posted on here of people asking for help converting CSS to jquery. Look at this question: http://stackoverflow.com/questions/12449887/how-to-convert-css3-transition-easing-to-jquery-easing-function –  Jan 05 '14 at 16:43
  • @Skullomania have you tried the suggestion posted to you yesterday? what happens? –  Jan 05 '14 at 16:44
  • All it does is underlines the overlay text in red for some reason. Like I mentioned earlier I played around with it for 5 or so hours before passing out and I am no expert on JQuery. However I did see others posting questions for others to help convert their CSS. I didn't mean to offend, or try to pass off my work as it was mentioned. – Skullomania Jan 05 '14 at 16:48

1 Answers1

3

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

jmore009
  • 12,863
  • 1
  • 19
  • 34