Results 1 to 10 of 10

Thread: jQuery fade effects in IE(8)

  1. #1
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    221
    Thanks
    43
    Thanked 1 Time in 1 Post

    Default jQuery fade effects in IE(8)

    Sample code:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style>
    span {display:none;}
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("span").fadeIn(3000);
      });
    });
    </script>
    </head>
    <body>
    <button>Fade in</button>
    <span>This is some text.</span>
    </body>
    </html>
    It doesn't work in IE8 and probably older versions. Any solution?

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    what if you try hiding the span with jQuery instead?

    Code:
    $('span').css({'display':'none'});
    (And remove the css style that hides it.)
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    221
    Thanks
    43
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by Beverleyh View Post
    what if you try hiding the span with jQuery instead?

    Code:
    $('span').css({'display':'none'});
    (And remove the css style that hides it.)
    I'm afraid it doesn't help.

  4. #4
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style>
    span {display:none;}
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("span").fadeIn(3000);
      });
    });
    </script>
    </head>
    <body>
    <button>Fade in</button>
    <span>This is some text.</span>
    </body>
    </html>
    Try updating it to the latest version of jquery.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  5. #5
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    221
    Thanks
    43
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by bernie1227 View Post
    Try updating it to the latest version of jquery.
    I tried it to no avail.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,375
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    It needs to be laid out differently for IE 8 and less. Here's one way:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style>
    span {display: inline-block;}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("span").fadeIn(3000);
      });
    });
    </script>
    </head>
    <body>
    <button>Fade in</button>
    <span style="display: none;">This is some text.</span>
    </body>
    </html>
    Here's another:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style>
    button, span {display: block; float: left; margin-right: 0.5em;}
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("span").fadeIn(3000);
      });
    });
    </script>
    </head>
    <body>
    <button>Fade in</button>
    <span style="display: none;">This is some text.</span>
    </body>
    </html>
    There may be other ways. Essentially though I believe it needs to be display block (will probably work in IE 6+, jQuery doesn't support IE less than 6) or inline-block (may break down in IE 7 or 6 due to those browsers not rendering it inline). In ordinary javascript when applying filters (fade is accomplished in IE 8 and less via a proprietary IE filter) to an element, we are told that the element "must have layout". The zoom property is often used for that. I tried it here though and it did not work.

    For more on what MS says constitutes 'layout', see:

    http://msdn.microsoft.com/en-us/libr...(v=vs.85).aspx
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Rain Lover (11-02-2012)

  8. #7
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    221
    Thanks
    43
    Thanked 1 Time in 1 Post

    Thumbs up

    Quote Originally Posted by jscheuer1 View Post
    There may be other ways. Essentially though I believe it needs to be display block (will probably work in IE 6+, jQuery doesn't support IE less than 6) or inline-block (may break down in IE 7 or 6 due to those browsers not rendering it inline). In ordinary javascript when applying filters (fade is accomplished in IE 8 and less via a proprietary IE filter) to an element, we are told that the element "must have layout". The zoom property is often used for that. I tried it here though and it did not work.
    Informative and helpful as always! Thanks a lot!

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,375
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    I reread the spec and it does say that zoom is good enough. jQuery itself applies zoom in IE when fading for this very reason. However, as we can plainly see that's not always enough for IE 8 (it would be if the item were display: block;). It is for IE 7 and 6 I believe. IE 8 is a strange animal, not fully compliant with MS's own junk, and not yet compliant enough with standards to make up for it. IE 9 in standards mode doesn't need zoom as it uses standards compliant opacity, rather than a filter.

    Interestingly, what MS calls layout is almost the opposite of the term. It's anything that takes the element out of the flow or layout of the page. But even that's inconsistent because for them it also includes width and height, which are often in the layout of the page. But again, not all of those things always work, especially with IE 8.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #9
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    221
    Thanks
    43
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by jscheuer1 View Post
    IE 8 is a strange animal
    Funny! LOL!

  11. #10
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    John's good like that
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

Similar Threads

  1. Resolved Javascript fade in&out (without jquery)
    By keyboard in forum JavaScript
    Replies: 1
    Last Post: 09-05-2012, 10:15 AM
  2. Jquery effects don't activate until after I mouse over once
    By brainbuzzmedia in forum JavaScript
    Replies: 7
    Last Post: 07-26-2010, 12:24 AM
  3. Jquery fade in out
    By bluewalrus in forum JavaScript
    Replies: 0
    Last Post: 11-17-2009, 10:05 PM
  4. Replies: 1
    Last Post: 09-09-2009, 12:40 PM
  5. Advanced RSS Ticker fade effects my navigation menu
    By ddfossils in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 01-10-2007, 01:35 AM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •