jQuery .addClass und .fadeIn?

So, ich habe diese h1-Elemente, die links und ich möchte hinzufügen, eine Klasse zu Ihnen und fade, die Klasse, sobald das element mit der Maus auf, und dann onMouseOut haben die Klasse entfernt, während das verblassen der Klasse. Aber das mit der fade-Funktion tut nichts für mich. Zu sehen, wie es das element ausblendet. Irgendwelche Ideen?

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

Dank!

EDIT:::

jQuery("h1").hover(function() {
      jQuery(this).stop().animate({ backgroundColor: "#a7bf51"}, 800);
      },function() {
      jQuery(this).stop().animate({ backgroundColor: "#FFFFFF"}, 800);
      });
});
  • Klarheit bitte, was Sie tun möchten, zu verblassen, in? Möchten Sie die Verbindung zu verblassen in ein Sie mit dem Mauszeiger auf die h1? Ihr code wird verblassen, wenn es funktionierte, würde nur server-blenden Sie die Verknüpfung aus, aber dann werden Sie nicht in der Lage zu verblassen es wieder.
  • Nein. Ich möchte zu verblassen in der Klasse Hinzugefügt, um die h1>tag. und dann fade out auf die Maus
  • Siehe >>jsfiddle.net/NLChW/4 << mithilfe animieren
  • squaredcube.com/beta Nicht funktioniert.
  • Sie brauchen, um jQuery-UI-Bibliothek in Ihre Seite ein. Versuchen Sie, einschließlich <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script> in Ihre Seite und es sollte funktionieren.
  • Ahh, das macht viel mehr Sinn, jetzt... Danke! 🙂

InformationsquelleAutor Aaron Brewer | 2012-05-03
  1. 10

    Versuchen mit Hilfe von 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 (Für einige Grund, es nicht richtig animieren(fade) für die erste Zeit.. aber dann ab es funktioniert)

    Edit: Aktualisiert, für die Vollständigkeit.

    Können Sie auch .animate um die gewünschte Wirkung zu erzielen. Siehe unten,

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

});

    DEMO

    • Das ist eine interessante Art, es zu tun. Überprüfen Sie heraus meine Antwort unten, ich glaube, es ist sauberer. Gibt es einen Grund, warum man mit Stopp-Funktion und addClass statt wechseln?
    • Grund für .zu stoppen ist zu stoppen fade-übergang oder sonst schwebt über mehrere verbindungen schnell ist, zeigen mehrere animation gleichzeitig. Auch Sie wäre in der Lage, es zu sehen, wenn Sie eine längere Dauer (1000ms)
    • Interessant, Danke für die Erklärung! Sollte ich das nicht machen Annahmen über den Benutzer, Maus Geschwindigkeit, haha.
    • Danke Vega!
    InformationsquelleAutor Selvakumar Arumugam
  2. 4

    Wenn Sie Sie nicht verwenden möchte, jquery-UI, da wird es einen extra laden, können Sie Folgendes tun :

    (war nützlich für mich, wenn die 'versteckte' bootstrap-Klasse ist in meinen app)

    Verblassen langsam, während das entfernen der Klasse :

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

    Fade-Out langsam, fügen Sie die Klasse und dann wieder eingeblendet:

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

    hoffen, dass dies vereinfachen jemand die Aufgabe!

    InformationsquelleAutor Nishanth Shaan
  3. 2

    Klingt wie Sie möchten, die Stile der Klasse zu verblassen. Sie sollten sich in animate() für die: http://api.jquery.com/animate/

    fadeIn einfach verblasst im element.

    • Okay, ich habe versucht, mit dieser Animate-Funktion und kann nicht scheinen, um selbst machen es jetzt funktionieren... Siehe aktualisierte Frage.
    • Siehe >>jsfiddle.net/NLChW/4 << mithilfe animieren
    • Heya Vega, funktioniert das nicht. squaredcube.com/beta
    InformationsquelleAutor Steve Davis
  4. 1

    Ich glaube nicht, können Sie cross-fade zwischen den Klassen, aber Sie können die animate Funktion. animate können Sie Einfluss auf alle css-variable über eine angegebene Zeit.

    http://api.jquery.com/animate/

    Ich weiß, dass entfernt einige styling aus der css-Datei, aber wieder, ich glaube nicht, jQuery wird cross-fade zwischen den Klassen.

    • Okay, ich habe versucht, mit dieser Animate-Funktion und kann nicht scheinen, um selbst machen es jetzt funktionieren... Siehe aktualisierte Frage.
    InformationsquelleAutor jray
  5. 1

    Wenn Sie die jQuery UI-Bibliothek geladen haben, können Sie eine zusätzliche param für die toggleClass-Funktion.

    Legen Sie Ihre Deckkraft ist via css.

    h1 a {
  opacity:0.8;
}

h1 a.hovered {
  opacity: 1.0;
}

    dann 

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

    Den 1000 Millisekunden-Zähler auf der Veranstaltung. Also die Wirkung hat, sollte fade to 1.0 Deckkraft bei Mauskontakt in einem zweiten und fade-out-in 1 Sekunde, wenn nicht schwebte.

    • Das ist, warum ich sagte, "Wenn Sie die jQuery UI-Bibliothek geladen". ;}
    InformationsquelleAutor Christopher Marshall
  6. 0

    Versuchen Sie dies, und hier ist das jsFiddle (geben Sie den link-Beschreibung hier) : 

    <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>​
    InformationsquelleAutor
Schreibe einen Kommentar