Home/ Questions/Q 8766651
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T16:36:29+00:00

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

  • 0

Sample 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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think because the span tag is an inline element, it has no layout, unlike block level elements like DIVs.

    Swap it to a div and it works, alternatively, this approach (assign block layout to your span, then hide with Jquery) will retain your markup as is and function as desired under IE8:

    <!DOCTYPE html>
<html>
<head>
<title></title>
<style>

span {display:block;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").hide();
  $("button").click(function(){
    $("span").fadeIn(3000);
  });
});
</script>
</head>
<body>
<button>Fade in</button>
<span>This is some text.</span>
</body>
</html>
    • 0