jQuery .addClass und .fadeIn?

Question

Also, ich habe diese h1 Elemente, die Links sind und ich möchte eine Klasse hinzufügen und verblassen diese Klasse in sobald das Element wurde über schwebte, und dann onMouseOut die Klasse entfernt haben, während die Klasse verblassen. Aber die Verwendung der Fade-Funktion macht nichts für mich. Sehen, wie es das Element verbirgt. Irgendwelche Ideen?

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

Vielen Dank!

EDIT :::

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

Answer 1

Verwenden Sie die jQuery UI .addClass und .removeClass.

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

DEMO (Aus irgendeinem Grund, es animieren nicht richtig (fade) zum ersten Mal .. aber dann weiter funktioniert es gut)

Edit: für Vollständigkeit aktualisiert. Sie können auch .animate verwenden, um den gewünschten Effekt zu erzielen.Siehe unten,

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

}); 

DEMO

Answer 2

Klingt wie Sie die Stile der Klasse wollen in verblassen Sie in belebter aussehen sollte() dafür:.

fadeIn verblasst einfach in die Element.

Answer 3

Ich glaube nicht, dass Sie Fade zwischen Klassen überkreuzen können, aber Sie können die animate Funktion verwenden. animate können Sie jede CSS-Variable über eine bestimmte Zeit beeinflussen.

Ich weiß, dass einige Styling aus der CSS-Datei entfernt, aber wieder, ich glaube nicht, jQuery verblasst zwischen den Klassen kreuzen.

Answer 4

Wenn Sie die jQuery UI-Bibliothek geladen haben, können Sie einen zusätzlichen Parameter für die Funktion toggleClass festlegen.

Stellen Sie Ihre Deckkraft über CSS ein.

h1 a { 
    opacity:0.8; 
} 

h1 a.hovered { 
    opacity: 1.0; 
} 

dann

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

Der 1000 ist die Millisekunden-Zähler auf dem Ereignis. Daher sollte der Effekt in einer Sekunde auf eine Deckkraft von 1,0 und in einer Sekunde auf eine Schwundebene ausgeblendet werden, wenn er nicht schwebte.

Answer 5

die Sie interessieren, und hier ist die 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

Wenn Sie möchten, verwenden jquery UI nicht, weil es eine zusätzliche Belastung sein wird, können Sie tun Sie folgendes:

(war nützlich für mich, wenn die 'versteckte' Bootstrap-Klasse in meiner App verwendet wird)

Aufblenden langsam beim Entfernen der Klasse:

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

Abblenden langsam, die Klasse hinzufügen und dann verblassen wieder in:

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

Hoffnung diese jemandes Aufgabe vereinfachen!