javascript - Jquery fadeIn fadeOut 在 IE8 中不工作，但在 chrome，firefox 中工作

Question

我正在尝试使用 jquery fadeIn 和 fadeOut 方法显示和隐藏一些元素 (span)，所以我使用了以下代码:

<script type="text/javascript">
$(document).ready(function(){

$("a.moretag").click(function(){
$("span.hideelement").fadeIn("slow");
$("a.moretag").fadeOut("slow");
$("a.lesstag").fadeIn("slow");
});


$("a.lesstag").click(function(){
$("span.hideelement").fadeOut("slow");
$("a.lesstag").fadeOut("slow");
$("a.moretag").fadeIn("slow");
});

});

</script>

 .....
 <span class="hideelement" style="display:none;">First</span>
 <span class="hideelement" style="display:none;">Second</span>
 .
 .
 <span class="hideelement" style="display:none;">Tenth</span>
 <a class="moretag"><strong>More</strong></a>
 <a class="lesstag" style="display:none;"><strong>Less</strong></a>
 .....

在上面的代码中，当用户点击“more”链接时，它会显示之前隐藏的元素(display:none)，more 链接消失，“less”链接反之显示。

在这里，当我单击“更多”链接时，它工作正常意味着它消失并显示“更少”链接副版本。但它不显示/隐藏隐藏的跨度元素。

此代码在 chrome、mozilla 和 IE7 中运行良好，但在 IE8 中不起作用。代码有什么问题。请帮助我。

提前致谢。

Answer 1

您必须在 IE8 中使用 fadeOut 和 FadeIn。 IE9 和 IE7 可以运行它，但 ib IE8 你不能制作 fade 动画。您可以使用 show() 和 hide();

    $(document).ready(function(){

$("a.moretag").click(function(){
$("span.hideelement").show("slow");
$("a.moretag").hide("slow");
$("a.lesstag").show("slow");
});


$("a.lesstag").click(function(){
$("span.hideelement").hide("slow");
$("a.lesstag").hide("slow");
$("a.moretag").show("slow");
});

});

在这个 link 试试这个功能

在IE8中有使用淡入淡出效果的选项，将display改为inherit

例子:

 .MyDiv{
   display:inherit;
 }