Question

我想创建一个隐藏在另一个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>

Answer 1

使用callback参数进行动画处理，该参数在动画后执行，并通过将其包裹在跨度中来切换文本

function f1(){
    if (visible)$('span').show();
    else $('span').hide();
}
//...
$('.t1').animate(
   {width: visible ? 300 : 0},
   "slow",f1);

http://jsfiddle.net/aLz6qh7t/7/

jQuery Toggle Div水平切换隐藏文本完成切换

1 个答案: