0

Necesito optimizar mi código javascript para una animación. Ahora se realiza la acción desatando dos funciones con "onmouseenter" y onmouseleave" y me gustaría optiomizar a una sola. Actualmente el código es:

html

 <div>
 <img onmouseenter=" myf1()"; onmouseleave="myf2()" id="img" class="img 
 img3" src="http://www.placehold.it/150x150">
 </div>

css

.img {
  transform: rotate(0); border-radius: 50%;
}
.img2 {margin-left:3.5em; transition: all 1s; transform:rotate(-45deg)}
.img3 {margin-left:0; transition: all 1s; transform:rotate(0)}

js

function myf1() {
  var element = document.getElementById("img");
  element.classList.remove("img3");
  element.classList.add("img2");
}
function myf2() {
  var element = document.getElementById("img");
  element.classList.remove("img2");
  element.classList.add("img3");
}
2
  • ¿Por qué quieres juntarlas en una función? Imagínate que las juntas y las tienes en una función. ¿Qué pasa ahora si quieres que se haga algo pero solo cuando hagas el mouseenter y no en el onmousleave? ¿Llenas la función de ifs para ver si estás haciendo la entrada o la salida...?
    – ordago
    Commented el 26 nov. 2019 a las 16:02
  • tienes toda razón en tu comentario, ese supuesto ya está contemplado para el caso en que tenga que darse, pero ahora mismo para la funcionalidad que se requiere no es el caso, de ahí que me guste la idea, si es posible, de optimizar el código.
    – JorgeGuz
    Commented el 26 nov. 2019 a las 16:04

1 respuesta 1

1

Una forma de juntarlo en una función sería esta:

<img onmouseenter="myfX('img3', 'img2');" onmouseleave="myfX('img2', 'img3');" id="img" class="img img3" src="http://www.placehold.it/150x150" />

function myfX(quita, pon) {
  var element = document.getElementById("img");
  element.classList.remove(quita);
  element.classList.add(pon);
}

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.