boton con animacion fade en jquery

fupinet · #1 (**permalink**) 25/10/2010, 07:47

Hola a todos, tengo un boton en mi web que me gustaria animar con un fade in y un fade out al pasar el raton pero no lo consigo, he visto cosas por internet pero no se aplicarlo a mi codigo que es el siguiente:

Código HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />

<title>prueba boton</title>

<style type="text/css">
#boton a:hover  {
   background-position: -107px 0%;
}

#boton a  {
   background: url(images/boton.gif) no-repeat 0% 0px;
   display: block;
   height: 49px;
   width: 107px;
   font-size: 49px;
   line-height: 49px;
}

#boton  {
   visibility: visible;
   position: absolute;
   left: 12px;
   top: 81px;
   z-index: 1;
   width: 107px;
   height: 49px;
}



html, body  {
   padding: 0px;
   margin: 0px;
   background-color: #FFFFFF;
}

</style>
</head>
<body>

<div id="boton"><a  href="boton1.html"  title="boton 1"></a></div>

</body>
</html>

mayid · #2 (**permalink**) 25/10/2010, 18:40

Y no publicas codigo javacript? Para nosotros es importante ver que intentaste.

Sabes usar document.ready?

Sabes usar los selectores por id y class?

fupinet · #3 (**permalink**) 26/10/2010, 01:29

el codigo que probe es el siguiente:

Código HTML:

 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#boton").fadeTo("slow", 1.0);
$("#boton a").hover(function(){
$(this).fadeTo("slow", 0.0);
},function(){
$(this).fadeTo("slow", 1.0);
});
});
</script>

me hace el fade al pasar al raton pero el boto desaparece y no exactamente lo que quiero y otra cosa que creo que falla es que si señalas al boton y rapidamente lo quitas y lo hace 2 veces al menos parece que tiene un contador que sigue repitiendose el efecto.

no entiendo mucho de javascript, toda ayuda que me podais decir me vendria bien gracias.

mayid · #4 (**permalink**) 26/10/2010, 06:55

El boton desaparece con 0.0, cierto?

La repeticion es algo feo, pero entiendo que pase. Alguien sabe solucionarlo?

fupinet · #5 (**permalink**) 26/10/2010, 07:30

el boton desaparece con 0.0 si lo pongo en 1.0 no desaparece pero no me crea el efecto no se como ponerlo que una accion a otra se vea con el fade.. y lo del contaador supongo que habra un comando par romper o de interrupir el efecto cuando quitas el raton.

Dany_s · #6 (**permalink**) 27/10/2010, 14:38

con un stop, para que detenga la animación cuando se lanza el evento al entrar o al salir

Código HTML:

Ver original<html>
<head>
    <title>Pruebas</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function(){
 
    $("#boton").fadeTo("slow", 1.0);
    
    $("#boton a").hover(function(){
        $(this).stop().fadeTo("slow", 0.0);
    },function(){
        $(this).stop().fadeTo("slow", 1.0);
    });
 
});
</script>
<style type="text/css">
a{color: blue; font-size: 20px}
</style>
</head>
<body>
    <div id="boton"><a href="#">Fade</a> </div>
</body>
</html>

fupinet · #7 (**permalink**) 28/10/2010, 01:27

Gracias Dany_s has solucionado el tema del contador!

pero me sigue fallando el fade....no quiero que valla a cero quiero como sale en esta web: http://jqueryfordesigners.com/image-fade-revisited/

pero adaptado a lo que ya tengo, es decir un boton que es un imagen que al hacer Hover desplace el fondo horizontal con css para que cambie el estado con una animacion suave.

gracias

fupinet · #8 (**permalink**) 29/10/2010, 11:31

nadie sabe como puedo hacer un fade con la accion hover?