Tengo el siguiente problema, ya logre ocultar un div de derecha a izquierda, pero lo que pasa es que el segundo div (el que se va a mostrar) no aparece hasta que el primer se haya ido por completo.
Pero necesito que a medida que el primer div se va por la izquierda, el segundo div llegue por la derecha
Miren los códigos:
Primer div
<div id="divHome" class="row visible">
<div class="col-md-6">
<h1 id="h1HomeTitle" class="lang" key="h1HomeTitle">Laboratorio estrategico</h1>
<h4 class="lang" key="h4FHomeFirstText">
Diseñamos a través de las necesidades de <br> marca la mejor ruta
para cumplir con sus <br> objetivos y alcanzar resultados.
</h4>
</div>
<div class="col-md-6">
<?php
echo $this->Html->image('Procesos.png', array('alt' => 'Proceso', 'key' => 'imgProcess',
'class' => 'lang', "width" => "650", "height" => "650"));
?>
</div>
</div>
Segundo div
<div id="divNeeds" class="row" hidden="true">
<div class="col-md-6">
<h1 id="h1NeedsTitle" class="lang" key="h1NeedsTitle">Descubrir necesidades</h1>
<h4 class="lang" key="h4FNeedsFirstText">
El comienzo de una estratégia funcional es conoces nuestro <br>
objetivo y que necesidades queremos resolver, de esta forma <br>
nuestro equipo a través de un laboratorio enlaza un vínculo con <br>
la marca y da comienzo al plan estrategico.
</h4>
</div>
<div class="col-md-6">
<?php
echo $this->Form->create('Need', array('class' => '', 'id' => 'msform'));
?>
<label class="lang" key="h1NeedForm">Aprovechemos el tiempo y comencemos</label>
<?php
echo $this->Form->input('client', array('label' => array('text' => "¿Para que marca vamos a trabahar?",
'key' => 'lblClient', 'class' => 'lang'), 'placeholder' => 'Dinos el nombre de tu empresa',
'class' => 'validador txtClient lang', 'key' => 'txtClient'));
echo $this->Form->input('need', array('label' => array('text' => "Escríbenos acerca de tu necesidad",
'key' => 'lblNeed', 'class' => 'lang'), 'placeholder' => 'Agradecemos nos detalles muy bien la necesidad, '
. 'es nuestro punto de partida para generar ideas quer fortalezcan la estrategia para resolverla.',
'rows' => '4', 'class' => 'validador txtNeed lang', 'key' => 'txtNeed', 'style' => 'resize: none;'));
echo $this->Form->input('objective', array('label' => array('text' => "¿Cuál es el objetivo?",
'key' => 'lblObjective', 'class' => 'lang'), 'placeholder' => 'Que se quiere alcanzar con la'
. 'solución de la necesidad, ¿Adquirir usuario? ¿Mejorar ventas? ¿Posicionar la marca? ... entre otros.'
. ' Agradecemos nos detalles muy bien el objetivo.', 'rows' => '4',
'class' => 'validador txtObjective lang', 'key' => 'txtObjective', 'style' => 'resize: none;'));
?>
<?php
$options = array(
'class' => 'lang',
'label' => 'Enviar y continuar',
'key' => 'btnFormNeed'
);
echo $this->Form->end($options);
?>
</div>
</div>
Visible class es para saber cual es el div que se esta mostrando.
$(".visible").animate({
width: "toggle",
opacity: "toggle"
}, 2000);
$("#divNeeds").show();
Así oculto el primer div, pero no se como ir mostrando el segundo ya que solo se ve cuando el primero no se ve en absoluto
Les mostrare como se va desapareciendo, espero si se logre apreciar en fotos, si no mis disculpas:
Como pueden ver en las fotos el div segundo se queda quieto hasta que el otro se va
$(".visible").removeClass("visible"); $("#divNeeds").addClass("visible");