1

Hola soy iniciado en esto de HTML, CSS y JavaScript.

Viendo jQuery, estoy haciendo una practica en la que quiero que se anime el ancho de dos cajas al hacer hover sobre ella primero en una luego en otra.

Lo he hecho con el siguiente código, pero creo es horrible y se puede hacer mas fácil como por ejemplo en una función que haga la animación y que independientemente de tener una caja o 100 al asignarle la función cada caja individualmente se anime.

Este es el código que he hecho

function alargar() {
  $(document).ready(function() {

    $('#uno').animate({
      'width': '400px'
    });
  });

}

function alargar1() {
  $(document).ready(function() {

    $('#dos').animate({
      'width': '400px'
    });

  });

}
<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<title>cajas movimiento</title>




<div>
  <div onmouseover="alargar()" id="uno" style="background-color:red; width:200px; height:500px">1</div>

  <div onmouseover="alargar1()" id="dos" style="background-color:rgb(0, 255, 42); width:200px; height:500px">2</div>

</div>

1
  • Hola Daniel. No me ha quedado claro el resultado que esperas...puedes reformular la explicacion? Un saludo!
    – lois6b
    el 15 mar. 2019 a las 12:14

4 respuestas 4

3

Puedes usar una clase común para las cajas - "alargable" en este ejemplo - y asignarle eventos mouseover/mouseout de jQuery a los elementos con esa clase:

$(document).ready(function() {
  $(".alargable").mouseover(function() {
    $(this).animate({
      'width': '400px'
    });
  }).mouseout(function() {
    $(this).animate({
      'width': '100px'
    });
  });
});
<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

<div class="alargable" id="uno" style="background-color:red;width:100px;height:50px">1</div>
<div class="alargable" id="dos" style="background-color:rgb(0, 255, 42); width:100px; height:50px">2</div>

1
  • 4
    lo malo de esta solucion es que si te da por hacer el bobo con el ratón, y pasas mucho por encima de las cajas repetidamente, seguiran haciendo animacion hasta que el numero de ellas se hayan realizado... Añadiria un flag por si acaso :P
    – lois6b
    el 15 mar. 2019 a las 12:23
3

Si quieres que se encojan de nuevo al quitar el ratón no necesitas Javascript para esto, podrías hacerlo con puro CSS:

div.extensible {
  background-color: RGB(177, 0, 0);
  color: white;
  font-size: large;
  height: 160px;
  width: 230px;
  text-align: center;
  line-height: 150px;
  transition: all .5s ease;
}

div.extensible.verde {
  background-color: green;
  }

div.extensible:hover {
  width: 400px;
}
<div class="extensible">Pon el ratón encima</div>
<div class="extensible verde">Pon el ratón encima</div>

2

Si te he entendido bien quieres tener una funcionalidad genérica para animar las cajas que quieras sin tener que hacerlo individualmente. Para eso puedes utilizar las clases y un selector de clase. Te comento esto y algunas cosas más que he visto en tu código:

  1. $(document).ready: Estás usando mal el $(document).ready. Ready es un método especial que tiene jquery que lo que hace (a grosso modo) es esperar a que el DOM (página) esté completamente cargado y entonces ejecutar lo que venga dentro. Por eso, lo habitual es que se use una única vez en tu código.

  2. Uso de clases: Si te fijas, tienes dos métodos que hacen lo mismo para distintos ids (uno y dos). Esto no tiene mucho sentido, para ello lo mejor es no depender del identificador (que tiene que ser único) sino que puedes usar el atributo class. jquery permite seleccionar elementos en función de su clase (con el selector punto (.)). Así, si pones la misma clase a los dos elementos puedes seleccionarlos a la vez y llamar al método deseado todo de una vez.

  3. Palabra clave this: Una vez tienes seleccionados los elementos con el selector de clases ($(".caja")) puedes utilizar el método on que permite asignar a dichos elementos un evento (en este caso "mouseover") y definir la función a ejecutar en caso de lanzarse el evento (en este caso alargar). Si te fijas, dentro de alargar() no se hace referencia a ningún elemento en concreto si no que se llama a $(this). En ese contexto this hace referencia al elemento que le ha llamado (en un caso será el div uno y en otro dos). Aquí más info sobre this

$(document).ready(function(){
  $(".caja").on("mouseover", alargar);
});

function alargar(){      
    $(this).animate({
        'width':'400px'
    }); 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <div id="uno" class="caja" style="background-color:red; width:200px; height:500px">1</div>
    <div id="dos" class="caja" style="background-color:rgb(0, 255, 42); width:200px; height:500px">2</div>
</div>

0

$(document).ready(function() {
    $('.caja-animada').hover(function () {
        $(this).animate({
            'width': '400px'
        });
    });    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="caja-animada" id="uno" style="background-color:red; width:200px; height:500px">1</div>

  <div class="caja-animada" id="dos" style="background-color:rgb(0, 255, 42); width:200px; height:500px">2</div>

</div>

Podrías usar la función $(document).ready(function() para cuando el DOM haya cargado por completo, buscar todos los items con la clase .caja-animada (puedes ponerles la clase que quieras, pero todos los <div> que deseas que tengan esa animación deben poseerla) y asignarles el evento hover para que todos tengan esa animación. Luego por medio del this puedes referenciar solamente al <div> que haya disparado el evento.

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.