div内のテキストのスワップを遅延しようとしています。テキストのスライダ/カルーセルのように動作する必要があります。jQueryアクションのタイミングを遅らせるためにsetTimeoutを使用する
最終的なテキストの置き換えが起こらないので、コードを間違っている必要があります。
また、置換テキスト(たとえば、ブラインドなど)をアニメーション化するにはどうすればよいですか?
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#showDiv").click(function() {
$('#theDiv').show(1000, function() {
setTimeout(function() {
$('#theDiv').html('Here is some replacement text', function() {
setTimeout(function() {
$('#theDiv').html('More replacement text goes here');
}, 2500);
});
}, 2500);
});
}); //click function ends
}); //END $(document).ready()
</script>
</head>
<body>
Below me is a DIV called "theDiv".<br><br>
<div id="theDiv" style="background-color:yellow;display:none;width:30%;margin:0 auto;">
This text is inside the Div called "theDiv".
</div><br>
<br>
<input type="button" id="showDiv" value="Show DIV">
</body>
</html>
最も適切にこのツールは '.queue()'となると思います。 – Shikkediel