0

Necesito agregar un efecto a un botón en mi html, que al posicionar el cursor se desplieguen otros dos botones hacia arriba con su animación y cuando retire el cursor, se vuelvan a esconder.

Sé que con las funciones de jQuery mouseenter() y mouseleave() se puede lograr. También se puede lograr con Materialize (ejemplo abajo). ¿Cuáles son los scripts necesarios para que funcione? (Abajo dejo la librería)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
  <a class="btn-floating btn-large red">
    <i class="large material-icons">mode_edit</i>
  </a>
  <ul>
    <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
    <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
    <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
    <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
  </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

8
  • 1
    Por lo que veo ya funciona, no entiendo a qué te refieres cuando dices cuales son los scripts necesarios, te refieres al código para que funcione mediante jQuery?
    – Ivan-San
    el 16 sep. 2019 a las 17:28
  • Efectivamente @Ivan-San, los únicos scripts de la librería que hace que funcione..
    – Candelo
    el 16 sep. 2019 a las 17:31
  • @Ivan-San tiene razon, Si pruebas tu Snippet veras que esta funcionado el 16 sep. 2019 a las 17:31
  • @FRANCISCOJ.BLANCO, no voy a copiar toda la librería de materialize para hacer funcionar sólo un botón... ¿tú la copiarías toda?
    – Candelo
    el 16 sep. 2019 a las 17:32
  • @Candelo, entonces edita tu pregunta ya que no esta formulada como es, estas preguntando que necesitas agregar un efecto a un botón en mi html y tu ejemplo lo contesta el 16 sep. 2019 a las 17:46

1 respuesta 1

2

Para poder tener una animación muy parecida a lo que materialize hace como bien dices podemos utilizar los eventos de jQuery mouseenter y el de mouseleave.
Voy a remover la parte de materialize que contiene javascript y voy a recrear los eventos.


Básicamente lo que hacemos es agregar la propiedad de css transform a los enlaces dentro del menú, para que se sobrepongan arriba.
Después cuando el evento de mouseleave se accione haremos lo inverso y pondremos opacity en 0 para ocultarlos.

$('.btn-floating').on('mouseenter', function() {
  $(this).parent().addClass('active');
  $(this).next().children('li').children('a').animate({ 
 'transform': 'scaleY(1) scaleX(1) translateY(0px) translateX(0px)',
 'opacity': '1'
 });
});

$('.fixed-action-btn').on('mouseleave', function() {
 $(this).children('ul').children('li').children('a').animate({ 
 'transform': 'scaleY(0) scaleX(0) translateY(40px) translateX(40px)',
 'opacity': '0'
 });
 $(this).parent().removeClass('active');
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
  <a class="btn-floating btn-large red">
    <i class="large material-icons">mode_edit</i>
  </a>
  <ul>
    <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
    <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
    <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
    <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
  </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

3
  • Mil gracias @Ivan-San, de por casualidad, ¿sabes cómo hacer que aparezcan en orden hacia arriba, así como el que yo puse?
    – Candelo
    el 16 sep. 2019 a las 19:54
  • Si, podrías ordenar el arreglo antes de agregarle la animación, o simplemente cambiando el código fuente a cómo tú desees
    – Ivan-San
    el 16 sep. 2019 a las 19:59
  • Iván, me refiero a el efecto de aparecer los botones uno tras el otro, como en el snippet que adjunté.. Mil gracias.
    – Candelo
    el 16 sep. 2019 a las 22:17

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.