-1

サンプルコード:

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

IE8 およびおそらく古いバージョンでは機能しません。解決策はありますか？

4

2 に答える 2

1

span タグはインライン要素なので、DIV などのブロックレベル要素とは異なり、レイアウトがないと思います。

それをdivに交換すると機能します。代わりに、このアプローチ（ブロックレイアウトをスパンに割り当ててから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>
于 2012-11-01T12:19:47.887 に答える
0

テキスト表示をインラインで保持する必要がある場合は、スパンの 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>
于 2012-11-01T12:25:17.167 に答える