jQuery .addClass e .fadeIn?

Question

Quindi, ho questi elementi h1 che sono collegamenti e voglio aggiungere una classe e dissolvere quella classe in una volta che l'elemento è stato spostato sopra, e poi suMouseOut ha rimosso la classe, mentre la classe si è attenuata. Ma usare la funzione di dissolvenza non fa nulla per me. Vedendo come nasconde l'elemento. Qualche idea?

jQuery(".categories h1 a").hover(
function() { 
    jQuery(this).fadeIn("slow").addClass("active"); 
}, 
function(){ 
    jQuery(this).fadeOut("slow").removeClass("active"); 
}); 
}); 

Grazie!

EDIT :::

jQuery("h1").hover(function() { 
     jQuery(this).stop().animate({ backgroundColor: "#a7bf51"}, 800); 
     },function() { 
     jQuery(this).stop().animate({ backgroundColor: "#FFFFFF"}, 800); 
     }); 
}); 

Answer 1

Provare a utilizzare jQuery UI .addClass e .removeClass.

$(function() { 
    $(".categories h1 a").hover(function() { 
     $(this).stop(true,true).addClass("active", 500); 
    }, function() { 
     $(this).stop(true,true).removeClass("active", 100); 
    });  
}); 

DEMO (Per qualche motivo, non anima correttamente (fade) per la prima volta .. ma allora in poi funziona benissimo)

Modifica: Aggiornato per completezza.

È inoltre possibile utilizzare .animate per ottenere l'effetto desiderato.Vedi sotto,

$(function() { 
    $(".categories h1 a").hover(function() { 
     $(this).stop().animate({ 
      backgroundColor: "#a7bf51" 
     }, 800); 
    }, function() { 
     $(this).stop().animate({ 
      backgroundColor: "#FFFFFF" 
     }, 800); 
    }); 

}); 

DEMO

Answer 2

Sembra che si desidera gli stili della classe a svanire in Si dovrebbe guardare in animate() per questo:.

fadeIn svanisce semplicemente nel elemento.

Answer 3

Non penso che si possa passare alla dissolvenza tra le classi, ma è possibile utilizzare la funzione animate. animate consente di modificare qualsiasi variabile css in un momento specifico.

so che toglie un po 'di stile dal file css, ma ancora una volta, non credo jQuery attraverserà dissolvenza tra le classi.

Answer 4

Se è stata caricata la libreria dell'interfaccia utente jQuery, è possibile impostare un parametro aggiuntivo per la funzione toggleClass.

Imposta l'opacità tramite css.

h1 a { 
    opacity:0.8; 
} 

h1 a.hovered { 
    opacity: 1.0; 
} 

poi

jQuery(".categories h1 a").hover(function(e) { 
    $(this).toggleClass('hover', 1000); 
} 

Il 1000 è il contatore millisecondo sull'evento. Quindi l'effetto dovrebbe sfumare a 1.0 opacità quando si librò in un secondo e sfumare in 1 secondo quando non si librò.

Answer 5

Prova questa, ed ecco la jsFiddle (enter link description here):

<script type="text/javascript"> 
    jQuery(".categories h1").hover(function() { 
      jQuery(this).stop().animate({ "background-color": "#a7bf51"}, 800); 
      jQuery(this).addClass("active"); 
      jQuery(this).find("a").fadeIn("slow"); 
     }, 
     function() { 
      jQuery(this).stop().animate({ "background-color": "#FFFFFF"}, 800); 
      jQuery(this).addClass("active"); 
      jQuery(this).find("a").fadeOut("slow"); 
    }); 
</script> 
<style type="text/css"> 
    .categories h1 { 
     background-color: rgb(200, 200, 200); 
     display: block; 
     padding: 5px; 
     margin: 5px; 
     width: 100px 
    } 
    .categories h1 a { 
     display: none; 
    } 
</style> 
<div class="categories"> 
    <h1><a href="#">Item 1</a></h1> 
    <h1><a href="#">Item 2</a></h1> 
    <h1><a href="#">Item 3</a></h1> 
</div>​ 

Answer 6

Se non vuoi utilizzare jQuery UI perché sarà un carico aggiuntivo, è possibile effettuare le seguenti operazioni:

(è stato utile per me quando la classe di boot "nascosta" è utilizzata nella mia app)

Fade In lentamente durante la rimozione della classe:

$('.myClass').removeClass('hidden').fadeOut(0).fadeIn(10000) 

Fade Out lentamente, aggiungere la classe e poi svanire di nuovo in:

$('.myClass').fadeOut(1000, function(){ 
    $(this).addClass('hidden'); //or any other class 
}).fadeIn(10000) 

speranza questo semplificherà compito di qualcuno!