Javascript IE中的jQuery淡入淡出效果（8）_Javascript_Jquery_Internet Explorer 8_Fade

Javascript IE中的jQuery淡入淡出效果（8）

javascript jquery internet-explorer-8

Javascript IE中的jQuery淡入淡出效果（8）,javascript,jquery,internet-explorer-8,fade,Javascript,Jquery,Internet Explorer 8,Fade,示例代码： <!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> $(

示例代码：

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


span{显示：无；}
$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“span”）。法代因（3000）；
});
});
淡入
这是一些文本。

它在IE8中不起作用，可能在旧版本中也不起作用。有什么解决方案吗？

我认为因为span标记是一个内联元素，所以它没有布局，不像div这样的块级元素

将其交换为div，它也可以工作，或者，这种方法（将块布局分配给span，然后使用Jquery隐藏）将保留标记的原样，并按照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>


span{显示：块；}
$（文档）.ready（函数（）{
$（“span”）.hide（）；
$（“按钮”）。单击（函数（）{
$（“span”）。法代因（3000）；
});
});
淡入
这是一些文本。

如果您需要保留文本内联显示，请将span的CSS更改为“display:inline block”，以下代码显示了在前后处理文本的过程：

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

span {display:inline-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>
Previous text <span>This is some text.</span> Following text.
</body>
</html>


span{显示：内联块；}
$（文档）.ready（函数（）{
$（“span”）.hide（）；
$（“按钮”）。单击（函数（）{
$（“span”）。法代因（3000）；
});
});
淡入
上一篇课文这是一些课文。下文。