Mostrar y ocultar divs

publicado por: Anonymous

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:
12345

Como pueden ver en las fotos el div segundo se queda quieto hasta que el otro se va

solución

Primero que nada para que tus divs hagan la función que deseas debes declarar su estilo como el atributo que les pongo abajo:

  <div id="uno" style="position:absolute;background:#74DEFF;height:50px;width:600px; font-size:24px;">Videotutoriales.es</div>
  <div id="dos" hidden="true" style="position:absolute;background:#FF0004;height:50px;width:600px; font-size:24px;left:-600px;">Videotutoriales.es</div>

Para que estén a la misma altura por la propiedad position:absolute, después el segundo div debe estar una posición mas a la izquierda que el otro para hacer el efecto de que aparezca de un lado y por ultimo debes animar ambos elementos en la función y no simplemente hacer un show() la animaron debe contar con la propiedad queue: false que es la que dice que no espere a que termine una animación para recién empezar la otra;

_x000D_

_x000D_

<html>_x000D_
_x000D_
<head>_x000D_
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>_x000D_
  <script>_x000D_
    $(document).ready(function() {_x000D_
      $("button").click(function() {_x000D_
        $("#uno").animate({_x000D_
          left: "+=600",_x000D_
          width: "toggle",_x000D_
          opacity: "toggle"_x000D_
        }, {_x000D_
          duration: 2000,_x000D_
          queue: false_x000D_
        });_x000D_
_x000D_
        $("#dos").animate({_x000D_
          left: "+=610",_x000D_
          width: "toggle",_x000D_
          opacity: "toggle"_x000D_
        }, {_x000D_
          duration: 2000,_x000D_
          queue: false_x000D_
        });_x000D_
      });_x000D_
    });_x000D_
  </script>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
_x000D_
  <button>Animar</button>_x000D_
_x000D_
  <div id="uno" style="position:absolute;background:#74DEFF;height:50px;width:600px; font-size:24px;">Div 1</div>_x000D_
  <div id="dos" hidden="true" style="position:absolute;background:#FF0004;height:50px;width:600px; font-size:24px;left:-600px;">Div 2</div>_x000D_
</body>_x000D_
_x000D_
</html>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *