我想创建一个隐藏在另一个div下面的div，直到它通过按钮水平切换。隐藏的div应包含也隐藏的文本，但在切换div时也会显示。
此示例显示了它应该是什么样子。但是，当我向其中一个div添加一些文本时，文本显示。我希望它只在函数执行并且整个div被切换时才显示：
<style>
.map {height: 100px; width: 300px; position: absolute; background:green;}
.t1 {height: 100px; width: 0; position: absolute; background:red;}
.t2 {height: 100px; width: 0; position: absolute; background:blue;}
</style>
<html>
<div id="test">Map Details</div>
<div id="test2">Map Details 2</div>
<div id="close">Close</div>
<div class="map">Im a map</div>
<div class="t1 common"></div>
<div class="t2 common"></div>
</html>
<script>
$(document).ready(function () {
var visible=true;
$("#test").on('click', function() {
$('.t1').animate({width: visible ? 300 : 0}, "slow");
visible=!visible; });
$("#test2").on('click', function() {
$('.t2').animate({width: visible ? 300 : 0}, "slow");
visible=!visible;
});
$("#close").on('click', function() {
$('.common').animate({width: visible ? 0: 0}, "slow");
visible=!visible;
});
});
</script>
将动画的回调参数用于动画后执行的动画，并通过将文本包装在span中来切换文本
function f1(){
if (visible)$('span').show();
else $('span').hide();
}
//...
$('.t1').animate(
{width: visible ? 300 : 0},
"slow",f1);