JQuery Toggle Div Горизонтально скрыть текст полностью и до переключения - PullRequest
Новая
       15

JQuery Toggle Div Горизонтально скрыть текст полностью и до переключения

0 голосов
/ 26 апреля 2019

Я хотел бы создать 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>

1 Ответ

1 голос
/ 26 апреля 2019

Используйте параметр обратного вызова для анимации, который выполняется после анимации, и переключайте текст, оборачивая его в span 

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

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

...