I am making a page in which when an event occurs it fadeToggles some elements. My problem is to know if there is a way for the elements that did not fadeOut to scroll more elegantly when they take the place of the ones that did fade.
Here I made a Jsfiddle for better understanding
$('#boton').click(function() {
$('#1 ,#2').fadeToggle();
});
.circulo {
display: -webkit-inline-box;
border: 2px solid black;
height: 100px;
width: 100px;
margin-right: 2%;
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="boton" role="button">Click Toggle</button>
<br>
<div id="1" class="circulo"></div>
<div id="2" class="circulo"></div>
<div id="3" class="circulo"></div>
<div id="4" class="circulo"></div>
<div id="5" class="circulo"></div>
I would like the circles in this case to slowly scroll to the left when circles 1 and 2 disappear. And the same for the right when they appear.
This technique uses 3 animations in series and does not use fadeOut
To show them again, reverse the sequence.
Salu2
This is something simple like rnd does and they have the same animation