SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,003
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Change the span to a div and it will work.

    HTML Code:
    <!DOCTYPE html>
      <html>
        <head>
        <title>Strange IE8</title>
        <style>
          div {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(){
              $("div").fadeIn(3000);
            });
          });
        </script>
      </head>
      <body>
        <button>Fade in</button>
        <div>This is some text.</div>
      </body>
    </html>
    BTW, using a span did work in older IE versions. It is just IE8 being weird!

  3. #3
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by Pullo View Post
    Hi there,

    Change the span to a div and it will work.

    HTML Code:
    <!DOCTYPE html>
      <html>
        <head>
        <title>Strange IE8</title>
        <style>
          div {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(){
              $("div").fadeIn(3000);
            });
          });
        </script>
      </head>
      <body>
        <button>Fade in</button>
        <div>This is some text.</div>
      </body>
    </html>
    BTW, using a span did work in older IE versions. It is just IE8 being weird!
    Thanks for the answer!


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
  •