Show and hide divs

Question

Show and hide divs

Navigation

#1 by (1 votes)

0

I have the following problem, I already managed to hide a div from right to left, but what happens is that the second div (the one that is going to be shown) does not appear until the first div is completely gone.

But I need that as the first div goes to the left, the second div comes to the right

Look at the codes:

First 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>

Second 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 is to know which div is being displayed.

    $(".visible").animate({
                        width: "toggle",
                        opacity: "toggle"
                    }, 2000);
$("#divNeeds").show();

This is how the first div is hidden, but I do not know how to show the second div since it only appears when the first div is not seen at all

I will show you how it is disappearing, I hope if it can be appreciated in photos, if not my apologies:

As you can see in the pictures, the second div remains quiet until the other one goes

javascript jquery css3 css cakephp

asked by Andrés Vélez 12.04.2018 в 00:48

source

1 answer

Headers of datatable are positioned badly | responsive table materialize BATCH - Copy N files from a Windows directory

score 1 · Accepted Answer

First of all, in order for your divs to do the function you want, you must declare their style as the attribute that I put below:

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

So that they are at the same height by the property position:absolute , then the second div must be one more position to the left than the other to make the effect appear on one side and finally you must animate both elements in the function and not just doing a show () animated it must have the property queue: false which is the one that says not to wait for an animation to finish to just start the other;

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("button").click(function() {
        $("#uno").animate({
          left: "+=600",
          width: "toggle",
          opacity: "toggle"
        }, {
          duration: 2000,
          queue: false
        });

        $("#dos").animate({
          left: "+=610",
          width: "toggle",
          opacity: "toggle"
        }, {
          duration: 2000,
          queue: false
        });
      });
    });
  </script>
</head>

<body>

  <button>Animar</button>

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

</html>