CODEWITHSUNDEEP
jqueryjquery-plugins
ian_6500
ian_6500

Reputation: 358

jquery fade issue with IE8

I can't get this to fade smoothly in IE8. It works with the IE8 IE "Compatibility View" mode and on all the other non-IE browsers I've tried it on.

The "IAN MARTIN wedding photojournalism" animation part works perfectly in both 7 & 8. Then, the rest of the page is supposed to fade in. But, in IE 8, it just snaps into view and doesn't fade in like it's supposed to. I do have a lot of jquery stuff happening on this page, don't know if that's part of the problem? I do have jquery "Curvy Corners" inside the child div that fades in, the div that contains everything on the page... This isn't an issue on any of the other non-IE browsers I've tried it on...

Here it is, if people can take a look at my source and let me know if anything leaps off the page as a possible cause of my issue, please let me know. (Too much going on I think to cut 'n' paste the code into here.) Thanks!

http://ianmartinphotography.com/test-site/index.html

A follow-up, can I simply insert this code telling IE8 to emulate IE7 or will that eventually stop working as IE 8 gets updated? 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Upvotes: 0

Views: 2600

Answers (3)

ian_6500
ian_6500

Reputation: 358

What I'm finding out with experimentation is that IE 8 hates fading divs containing divs. IE7, or at least, IE8 emulating IE7, doesn't have a problem with this this arrangement. Safari and FF on both Windows and Mac don't have a problem with this either. So, while this is very unsatisfying I'm simply forcing my pages into IE7 compatibility mode

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

and hoping for better performance from IE9 which I've yet to test on...

Upvotes: 0

ian_6500
ian_6500

Reputation: 358

Okay, jquery IE Fadein and Fadeout Opacity

(I've been scouring the web on this issue, and finally hit on the right keywords--I wish I had unearthed this before!)

@woodstylee very well may have the answer I need:

He says: "I had the same problem in IE8. Setting the opacity of the DIV in JavaScript before I called fadeIn() solved the problem:"

$('.overlay').css('filter', 'alpha(opacity40)');
$('.overlay').fadeIn(500);

I'm not in front of my windows machine, but I'm itching to try this on IE. Here's my test page with woodstylee's fix, opacity set to "0." (This should correspond to the normal CSS display:none for non-IE browsers where it works well.) http://ianmartinphotography.com/test-site/index-ie.html

In IE8, the div #field should now smoothly fade into view, it's the white box with the photo and everything but "IAN MARTIN wedding photojournalism."

Before, this div would just snap into view with no fading transition. It would sorta work in IE compatibility mode, but it stuttered into view without a smooth transition...

Upvotes: 0

Barrie Reader
Barrie Reader

Reputation: 10713

At the moment you have:

<script>
$(window).load(function(){
$(".imwpj").animate({"top": "+=200px"}, 0).fadeIn(2000).delay(500).animate({"top": "+=295px"}, 900); });
</script>
<!--everything else-->

<script>
$(window).load(function(){
$('#sub-fader').delay(5400).fadeIn(1000); });
</script>

I suggest you change this to:

<script type="text/javascript">
$(window).load(function(){
  $(".imwpj").animate({
    "top": "+=200px"
  }, 0).fadeIn(2000).delay(500).animate({
    "top": "+=295px"
  }, 900, function() {
    $('#sub-fader').fadeIn(1000); });
  }); 
});
</script>

See how that works out.

p.s. 900, function() {, says that "When this is finished, THEN run this bit. So it doesn't all run at the same time.

[FURTHER EDIT]

$(document).ready(function(){
     setTimeout('runAnimation()', 500);
});

function runAnimation() {
    $(".imwpj").animate({
        "top": "+=200px"
    }, 0).fadeIn(2000).animate({
        "top": "+=295px"
    }, 900, function() {
        $('#sub-fader').fadeIn(1000); 
    });
}

This will wait a half second (for the DOM to load) before initialising the animation.

[EDIT AGAIN]]

Cufon is not defined [Break On This Error] <script type="text/javascript"> Cufon.now(); </script>
index.html (line 74)

preloadImages is not defined [Break On This Error] (function(){var s=true,t=false,aa=wind...nt;if(j instanceof Function)return i?

Neuro

Upvotes: 1

Related Questions