How to make an automatic Divs transition in Jquery?

Question

I want to make an automatic transition between Ivs.

Example:

div1 - show();
div2 - hide();

.... 3000milisegundoss...

div1 - hide();
div2 - show();
And stay in that transition...

I’m trying to do this way, I put in a toggle()it performs only once and to.

How to make this transition automatic/"infinite"?

$(function(){

		var div1 = $('.cliente1');
		var div2 = $('.cliente2');
		

		$(document).ready(function(){
			  div1.show();
			  div2.hide();

			setInterval(function(){
			    div1.toggle();
			    div2.toggle();			  
			}, 3000);
		});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="clients cliente1" style="border: 1px solid black">
        <div class="container">
            <div class="row">

            DIV 1
                <div class="col-md-3 col-sm-6">
                    <a>
                        Conteúdo DIV 1
                    </a>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a>
                        Conteúdo DIV 1
                    </a>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a>
                        Conteúdo DIV 1
                    </a>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a>
                        Conteúdo DIV 1
                    </a>
                </div>
            </div>
        </div>
    </aside>

    <aside class="clients cliente2" style="border: 1px solid black">
        <div class="container">
            <div class="row">
            DIV 2
                <div class="col-md-3 col-sm-6">
                    <a> 
                        Conteúdo  DIV 2
                    </a> 
                </div>
                <div class="col-md-3 col-sm-6">
                    <a>
                       Conteúdo  DIV 2
                    </a>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a>
                        Conteúdo  DIV 2
                    </a>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a>
                        Conteúdo  DIV 2
                    </a>
                </div>
            </div>
        </div>
    </aside>

Answer 1

Long live,

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout http://www.cprogressivo.net/2013/03/O-que-sao-e-como-usar-funcoes-recursivas-em-linguagem-C.html

When starting leave a div with class Hide and another without class Hide, you can do this with js or when you will present the page.. then runs the code:

function changeDiv(){

        var div1 = $('.cliente1');
        var div2 = $('.cliente2');

        div1.toggleClass('hide');
        div2.toggleClass('hide');

        setTimeout(changeDiv(),300);
}

changeDiv();

I think that’s what you want, anything warn ;)

Hug and good luck :)

Answer 2

@Zkk looks like your code is doing what you want, switch between div1 and div2.

However, it seems more certain to chain the disappearance and display of Divs 1 and 2. This gives you the possibility to make a smoother transition, only displaying one div when the other disappears altogether, thus:

$(function() {
  var div1 = $('.cliente1')
  var div2 = $('.cliente2')
  var escondida=div1, exibida=div2		
    
  $(document).ready(function(){
    exibida.show()
    escondida.hide()

    setInterval(function() {
      exibida.hide("fast", function() {
         // Neste ponto, "exibida" já se escondeu.
         // Exibir a "escondida"
         escondida.show("fast")  
         // Agora trocar "escondida" com a "exibida"
         temp = escondida
         escondida = exibida
         exibida = temp
      })
    }, 3000)
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="clients cliente1" style="border: 1px solid black">
        <div class="container">
            <div class="row">
            DIV 1
                <div class="col-md-3 col-sm-6">
                    <a>Conteúdo DIV 1</a>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a>Conteúdo DIV 1</a>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a>Conteúdo DIV 1</a>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a>Conteúdo DIV 1</a>
                </div>
            </div>
        </div>
    </aside>

    <aside class="clients cliente2" style="border: 1px solid black">
        <div class="container">
            <div class="row">
            DIV 2
                <div class="col-md-3 col-sm-6">
                    <a>Conteúdo DIV 2</a>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a>Conteúdo DIV 2</a>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a>Conteúdo DIV 2</a>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a>Conteúdo DIV 2</a>
                </div>
            </div>
        </div>
    </aside>