0

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" />
ian_6500
  • 358
  • 2
  • 10
  • 21
  • off-topic: get rid of "Curvy Corners", and use [CSS3Pie](http://css3pie.com) instead. Its a far superior CSS-friendly way of doing rounded corners in IE. – Spudley Jan 31 '11 at 09:48
  • re your follow-up: Yes, I imagine that 'solution' will stop working. IE9 is likely to contain an IE8-compatibility mode, but unlikely to have IE7 compatibility. I would seriously recommend avoiding compatiblity mode anyway; even if it does solve this specific issue, it will cause others -- it will come back to bite you sooner or later. – Spudley Jan 31 '11 at 09:51
  • @Spudley, Thank you for your thoughts on CSS3Pie... I gave it a try and couldn't get it to work in non-IE browsers. Curvey Corners was easy to implement and works well in every browser I've tried it on. (Plus, it fades in and out well in my jquery animations.) Re:IE, Hopefully IE9 will work like all the other non-IE browsers I've tested on--IE8 is the only one that doesn't work and I'm at a loss as to how to proceed... I think I'll just live with the issue as it doesn't degrade the used experience that much--frustrating though... – ian_6500 Feb 04 '11 at 17:44
  • CSS3Pie is a hack for IE only, but the idea is that other browsers all support the standard CSS3 `border-radius`, so only IE needs CSS3Pie. IE9 does support `border-radius`, so you can rest easy with that (try it by downloading the preview version). But anyway, if you're happy with Curvy Corners, that's fine. :-) – Spudley Feb 05 '11 at 15:42

3 Answers3

1

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

Barrie Reader
  • 10,647
  • 11
  • 71
  • 139
  • Thank you Neuro, a much more elegant way of stating that code. Unfortunately, It still does the same thing in IE8... – ian_6500 Jan 31 '11 at 16:59
  • I've edited my answer with another idea - not sure that will work either though :s – Barrie Reader Jan 31 '11 at 17:09
  • Here's the latest test page: http://ianmartinphotography.com/test-site/index.html (same problem...) – ian_6500 Feb 08 '11 at 13:43
  • @Neurofluxation Hi Neuro, thank you for your persistence! Can you please explicitly explain where I should add in your latest edit? (As if you couldn't tell--I'm a novice!) – ian_6500 Feb 09 '11 at 19:06
  • Ah, bascially that is the error message I found on your page when I had the "FireBug" developer tool bar open and the console enabaled. It seems that a variable `cufon` is not defined in your script properly (on line 74)... and neither is `preloadImages` - I hope that helps - try searching your code for both those terms. – Barrie Reader Feb 10 '11 at 07:46
0

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...

Community
  • 1
  • 1
ian_6500
  • 358
  • 2
  • 10
  • 21
0

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...

ian_6500
  • 358
  • 2
  • 10
  • 21