3

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.

0

2 respuestas 2

3

Esta tecnica utiliza 3 animaciones en serie y no utiliza fadeOut

  1. Cambia la opacidad para hacer invisible el elemento
  2. Cambia el ancho para generar la sensacion de movimiento de los otros elementos
  3. Oculta los elementos #1 y #2.

Para volver a mostrarlos, invierte la secuencia.

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>

1
  • Excelente! Mil gracias!
    – Genarito
    el 2 nov. 2016 a las 17:23
2

Esto es algo sencillo a como lo hace rnd y tienen la misma 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>

1
  • Me encantó! Gracias! Selecciono esta respuesta por simplicidad en el código
    – Genarito
    el 2 nov. 2016 a las 17:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.