jQuery: fade in/out + animieren der Elemente

Die Kern-Ursache des Problems ist, müssen Sie einen Anruf zu .siblings().stop(), zusätzlich der $(this).stop() (die Sie schon haben).

Nachdem Sie beheben, sehen Sie eine neue Ausgabe, wo Sie Ihre Beschriftungen zunächst ordnungsgemäß funktionieren, aber dann beginnen zu verblassen, nur teilweise, wenn Sie schon seit moused über immer wieder (und eines Tages werden Sie vollständig verschwinden, bis Sie die Seite neu laden). Dies ist aufgrund der Art und Weise .fadeIn() funktioniert in Kombination mit .fadeOut() -- fadeIn() muss nicht immer fade-in opacity:1 -- statt, es wird-in was auch immer "Deckkraft" angewendet wurde, zu der Zeit fadeOut() hieß zuvor.

Um dies zu umgehen, können Sie animate({opacity:1},'slow') statt fadeIn('slow') -- oder man kann das präziser (und klarer) .fadeTo('slow',1) (docs). (beachten Sie, dass die Reihenfolge der parameter ist bei den verschiedenen fadeTo, als im Vergleich zu den anderen Animations-Funktionen - die Dauer kommt zuerst, dann der Wert, den Sie möchten, zu verblassen).

Natürlich könnte man auch verwenden fadeTo() statt Ihrer andere Deckkraft-animation-obwohl, es ist sicherlich nichts falsch mit der Verwendung animate() als Sie gezeigt haben -- die beiden sind gleichwertig. (natürlich würden Sie brauchen, um se animate() wenn Sie wollen zu manipulieren, um mehrere css-Eigenschaften gleichzeitig.)

Wenn es kommt alles zusammen, es könnte in etwa so Aussehen:

$(function() {
    $('.image').each(function() {
        $(this).hover( function() {
            $(this).stop().fadeTo('slow',0.3)
                .siblings().stop().fadeTo('slow',1);
        }, function() {
            $(this).stop().fadeTo('slow',1)
                .siblings().stop().fadeTo('slow',0);
        });
    });
});

Sehen Sie diesen code in Aktion an jsFiddle: http://jsfiddle.net/coltrane/XstpE/

(Anmerkung: das Beispiel ist abhängig von der gehosteten Ressourcen, die mit der original-Beitrag über, so wird es nicht funktionieren, wenn diese verschoben oder sonst nicht verfügbar).

Beachten Sie auch: Im obigen Beispiel habe ich den Einsatz von .each() wie Sie es in Ihrer ursprünglichen Beispiel, aber ich möchte darauf hinweisen, dass es wirklich nicht notwendig.

Dem folgenden äquivalent ist (und würde in der Regel als "besser" jQuery-Technik):

$(function() {
    $('.image').hover(function() {
        $(this).stop().fadeTo('slow', 0.3)
            .siblings().stop().fadeTo('slow', 1);
    }, function() {
        $(this).stop().fadeTo('slow', 1)
            .siblings().stop().fadeTo('slow', 0);
    });
});

Wenn Sie einen event-handler, um eine multi-element-set, jQuery automatisch bindet den selben handler auf jedes element in der Menge. (Ich habe aktualisiert mein Beispiel auf jsFiddle (oben verlinkten), um den code ohne die each()).

Bearbeiten

Den OP darauf hin, dass schwebt über der Beschriftung (die sitzt oben auf dem Bild) bewirkt, dass die mouseleave handler auslösen, wodurch die roll-out-Aktion, die ausgeführt wird. Das gewünschte Verhalten ist, um die Beschriftung nicht auslösen der rollout.

Dieses Problem tritt auf, weil der Beschriftung "Schatten" des Bildes, des hover() auf das Bild angewendet wird. Wenn der Mauszeiger über die Beschriftung nicht mehr auf dem Bild (es ist auf der Beschriftung), damit der browser feuert ein mouseleave auf dem Bild. Die gleiche situation kann Anlass für alle Arten von subtilen Problemen zu-vor allem, wie Sie komplexer Inhalte.

Um dieses Problem zu lösen, empfehle ich, dass Sie sich einfach hover() eine Ebene nach oben (auf den container, die Bild und die Beschriftung), anstelle der Anwendung auf das Bild direkt. In diesem Fall, dass die container $('.entry'). Der code ändern würde, wie diese:

$(function() {
    $('.entry').hover(function() {
        $('.image',this).stop().fadeTo('slow', 0.3)
            .siblings().stop().fadeTo('slow', 1);
    }, function() {
        $('.image',this).stop().fadeTo('slow', 1)
            .siblings().stop().fadeTo('slow', 0);
    });
});

hier ist eine neue version der jsFiddle

InformationsquelleAutor Lee

Versuchen Sie es mit mouseenter() und mouseleave() anstelle von hover().

$(function(){
    $('.image').each(function() {
        $(this).mouseenter( function() {
            $(this).stop().animate({ opacity: 0.3 }, 'slow');
            $(this).siblings().fadeIn('slow');
        })
        .mouseleave( function() {
            $(this).stop().animate({ opacity: 1 }, 'slow');
            $(this).siblings().fadeOut('slow');
        });
    });
});

InformationsquelleAutor Jesse E. Stark