Animación del desplazamiento de los elementos al hacer fadeOut o fadeIn

estoy haciendo una pagina en la que al ocurrir un evento hace fadeToggle de algunos elementos. Mi problema reside en saber si hay una manera de que los elementos que no hicieron fadeOut se desplacen de forma mas elegante cuando ocupan el lugar de los que si desaparecieron.

Acá hice un Jsfiddle para que se entienda mejor

$('#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>

Me gustaría que los círculos en este caso se desplacen lentamente hacia la izquierda cuando desaparecen los circulos 1 y 2. Y lo mismo para la derecha cuando aparecen.

3
задан 02.11.2016, 18:39
2 ответа

Это что-то простое в, как его делает это rnd , и у них есть та же самая animaciГіn

$('#boton').click(function() {
  $('#1 ,#2').animate({
    width: "toggle",
    margin: "toggle",
    border: "toggle"
  }, 1000);
});
.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>
2
ответ дан 24.11.2019, 12:46
  • 1
    Я encant и # 243;! Спасибо! Я выбираю этот ответ из-за простоты в c и # 243; я говорю –  Genarito 02.11.2016, 19:22

Эта техника использует 3 типа оживления в серии и не использует fadeOut

  1. Меняет матовость, чтобы делать невидимым элемент
  2. Меняет ширину, чтобы производить чувство движения других элементов
  3. Скрывает элементы #1 и #2.

они, Чтобы вновь показывать, вкладывает последовательность.

Salu2

$('#boton').click(function() {
  if ($('#1:visible').length !== 0) {
    $('#1 ,#2').animate({ opacity: 0 })
               .animate({ width: 0 })
               .hide(0);
  } else {
    $('#1 ,#2').show(0)
               .animate({  width: "100px" })
               .animate({  opacity: 1  });
  }
});
.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>
3
ответ дан 24.11.2019, 12:46
  • 1
    Превосходный! Тысячи спасибо! –  Genarito 02.11.2016, 19:23