Mostrar y ocultar elementos con tiempo

publicado por: Anonymous

Necesito mostrar y ocultar primero 3 indicadores, y despues mostrar y ocultar los otros 3, tengo el código de esta manera, me muestra y oculta los primeros 3, los otros 3 no, pensé que de esta manera funcionaria:

_x000D_

_x000D_

   _x000D_
                    <div id="contenido">_x000D_
                    <div id="content-text1"></div>_x000D_
                    <div id="content-text2"></div>_x000D_
                    <div id="content-text3"></div>_x000D_
                    _x000D_
                    <div id="contenido2" style="display:none">_x000D_
                    <div id="content-text4"></div>_x000D_
                    <div id="content-text5"></div>_x000D_
                    <div id="content-text6"></div>_x000D_
                    _x000D_
                   _x000D_
                _x000D_
    _x000D_
                <script>_x000D_
                $(function(){_x000D_
                $.ajax({url: "https://widgetsdataifx.blob.core.windows.net/semana/semanaindicators", _x000D_
                success: function(result){_x000D_
                $("#content-text1").html(result);_x000D_
                $("#content-text1").html($(".item-row[data-item='UVR'] .item-value > span ").text());_x000D_
                $("#content-text2").html(result);_x000D_
                $("#content-text2").html($(".item-row[data-item='TRM'] .item-value > span ").text());_x000D_
                $("#content-text3").html(result);_x000D_
                $("#content-text3").html($(".item-row[data-item='EURCOP'] .item-value > span ").text());_x000D_
                $("#content-text4").html(result);_x000D_
                $("#content-text4").html($(".item-row[data-item='DTF'] .item-value > span ").text());_x000D_
                $("#content-text5").html(result);_x000D_
                $("#content-text5").html($(".item-row[data-item='OILVAL'] .item-value > span ").text());_x000D_
                $("#content-text6").html(result);_x000D_
                $("#content-text6").html($(".item-row[data-item='COFFEE'] .item-value > span ").text());_x000D_
                }});_x000D_
                });_x000D_
        </script>_x000D_
  _x000D_
    <script>_x000D_
    $(document).ready(function() {_x000D_
        //Ejecutamos método que oculta las cajas_x000D_
        OcultarContenedores1();_x000D_
      _x000D_
        //Cada 6 segundos ejecutamos la función que reinicializa los contenedorees_x000D_
        setInterval(function() {_x000D_
          OcultarContenedores2();_x000D_
        }, 12000);_x000D_
      _x000D_
      });_x000D_
      _x000D_
      //Método que oculta el primer contenedor para mostrar el otro_x000D_
      function OcultarContenedores1() {_x000D_
        setTimeout(function() {_x000D_
          $("#contenido").hide(6000);_x000D_
        }, 3000);_x000D_
      _x000D_
        setTimeout(function() {_x000D_
          $("#contenido2").show(12000);_x000D_
        }, 3000);_x000D_
      }_x000D_
      //Método que reinicializa los contenedores_x000D_
      function OcultarContenedores2() {_x000D_
        $('#contenido').show(6000);_x000D_
        $('#contenido2').hide(12000);_x000D_
      }_x000D_
_x000D_
      </script>_x000D_
</body>_x000D_
</html>

_x000D_

_x000D_

_x000D_

introducir la descripción de la imagen aquí

solución

Que tal, como te va, amigo, espero esto te de ideas o te ayude a solucionar tu problema.

“Edité el código, quizá con este nuevo método tengas más libertad de manipular los tiempos de salida y ocultación de los contenedores, y de esta manera, el método está más optimizado.”

_x000D_

_x000D_

$(document).ready(function() {_x000D_
  function hideShowContainers() {_x000D_
    //Validamos si contenedor2 tiene la clase 'jsHideContainer'  _x000D_
    if ($('#contenido2').hasClass('jsHideContainer')) {_x000D_
      //Eliminamos la clase 'jsHideContainer' para validar la parte negativa del condicional_x000D_
      $('#contenido2').removeClass('jsHideContainer');_x000D_
      //Ocultamos el contenedor1 mientras pasan 3 segundos  _x000D_
      $('#contenido').hide(3000);_x000D_
      //Mostramos el contenedor2 mientras pasan 3 segundos_x000D_
      $('#contenido2').show(3000);_x000D_
    } else {_x000D_
      //Ocultamos el contenedor2 mientras pasan 3 segundos_x000D_
      $('#contenido2').hide(3000);_x000D_
      //Mostramos el contenedor1 mientras pasan 3 segundos_x000D_
      $('#contenido').show(3000);_x000D_
      //Finalmente adicionamos la clase jsHideContainer para validar la parte positiva del condicional_x000D_
      $('#contenido2').addClass('jsHideContainer');_x000D_
    }_x000D_
  }_x000D_
_x000D_
  //Ejecutamos la función para que evalue los condicionales cada 5 segundos_x000D_
  setInterval(hideShowContainers, 5000);_x000D_
});

_x000D_

<html>_x000D_
_x000D_
<head>_x000D_
  <!--Import Google Icon Font-->_x000D_
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">_x000D_
  <!-- Compiled and minified CSS -->_x000D_
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">_x000D_
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>_x000D_
  <!-- Compiled and minified JavaScript -->_x000D_
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
  <div id="contenido" style="background:#f4f3f2;">_x000D_
    <div id="content-text">Contenido 1</div>_x000D_
    <div id="content-text2">Contenido 2</div>_x000D_
    <div id="content-text3">Contenido 3</div>_x000D_
  </div>_x000D_
  <br>_x000D_
  <div id="contenido2" class="jsHideContainer" style="background:#f1eee3;display:none">_x000D_
    <div id="content-text4">Contenido 4</div>_x000D_
    <div id="content-text5">Contenido 5</div>_x000D_
    <div id="content-text6">Contenido 6</div>_x000D_
  </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 *