How to make an automatic transition between divs in JQUery?

Question

How to make an automatic transition between divs in JQUery?

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I want to make an automatic transition between divs.

Example:

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

.... 3000milisegundoss ...

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

I'm trying to do this, put it in a toggle() it runs only once and stops.

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><asideclass="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>

javascript jquery

asked by anonymous 24.02.2016 / 17:09

2 answers

1

Live,

link link

When you start 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 run 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 let you know;)

Hugs and good luck:)

24.02.2016 / 17:16

How to get the correct date for the next event Fine tuning in Ranking for a game system [closed]

score 0 · Accepted Answer

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

However, it seems more right, to chain the disappearance and the display of divs 1 and 2. This gives you the possibility to make a smoother transition, only displaying one div when the other disappears completely, like this:

$(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><asideclass="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>