1
resposta

Hover com transição suave usando o Jquery

A função hover() do Jquery aceita alguma de tempo de transição? Para a mudança não ficar abrupta e sim suave. Caso não, existe alguma forma de fazer isso com o Jquery? Li na documentação da API desse link e não dizia nada sobre: https://api.jquery.com/hover/.

1 resposta

Boa noite,

O Hover em si tem dois eventos um quando ele entra no elemento e outra quando sai.

existem dois métodos que estão dentro do hover, mouseenter e o mouseleave você pode utilizá-los separadamente porem é possível usar eles na função hover conforme o código abaixo.

/*

Apenas Complemento $( selector ).hover( handlerIn, handlerOut ) é uma forma abreviada de: $( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

*/


<!doctype html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <title>hover demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

 <span id="div1">teste </span>

<script>

$("#div1").hover(
  function(){
     $(this).fadeTo(1000, 0.0001);
  },
  function(){
     $(this).fadeTo(3000, 1);
  }
 );

</script>

</body>
</html>

Existem vários Fade para o controle

fadeIn() fadeOut() fadeToggle() fadeTo()

Não vamos nos apegar a todos, alguns são até utilizados nos exemplos do link que você postou.

Usei apenas o fadeTo nele consigo controlar o tempo e opacidade do elemento.

Espero ter ajudado de alguma forma.