Wie kann ich verhindern, dass diese jQuery abstört?

Question

Also ich versuche, eine Box zu erstellen, die zwei Ebenen hat: Die vordere Ebene und die hintere Ebene. Sie werden übereinander gestapelt, so dass die hintere Ebene standardmäßig ausgeblendet ist.

Wenn Sie mit dem Mauszeiger über den oberen Rand der Box fahren (technisch gesehen vordere Ebene), sollte die vordere Ebene nach oben gleiten und die hintere Ebene zeigen. Ich versuchte, dies zu tun, indem ich .slideUp() und .slideDown() verwendete, aber es hielt heraus, beide Schichten zur gleichen Zeit aufdeckend. Also bin ich dann auf .slideUp() und .fadeIn() umgestiegen, aber das schien nicht zu viel zu helfen.

Wie Sie sehen können, zeigt es manchmal sowohl divs, wenn es um nicht angenommen hat, und es gleitet auch zufällig mehrmals. Wie könnte ich das effizienter machen?

Hier ist ein JsFiddle

UPDATE:

Fragen Debug-Hilfe zu suchen ("warum dieser Code nicht?") Muss umfassen das gewünschte Verhalten, um ein bestimmtes Problem oder Fehler und der kürzeste Code erforderlich, um es in der Frage selbst zu reproduzieren. Fragen ohne eine eindeutige Problembeschreibung sind nicht nützlich für andere Leser .

Das ist der Grund, warum Leute diese Antwort schließen ... Was hat diese Frage nicht, von dieser Liste?

Desired behavior? - Check 
Specific problem? - Check 
Shortest code necessary? - Check 
Clear problem? - check 

Answer 1

Sie nicht wirklich benötigen, um slideUp und slidedown, können Sie die Dia-Effekt zu erzielen, indem Sie die Transformation und Übergang CSS3 Eigenschaften.

Aktualisiert JS Geige: https://jsfiddle.net/9uw2q24h/3/

Javascript:

$('.outer').hover(function() { 
    $(this).children('.front').addClass('front-up'); 
}, function() { 
    $(this).children('.front').removeClass('front-up'); 
}); 

CSS:

.outer { 
    position: relative; 

    .front, 
    .back { 
    text-align: center; 
    width: 100%; 
    } 
    .back { 
    display: block; 
    } 
    .front { 
    position: absolute; 
    transition: 0.5s ease; 
    } 
    .front-up { 
    transform: translateY(-100%); 
    } 
} 

Wenn Sie ältere Browser unterstützen müssen, stellen Sie sicher, dass die Kreditoren Präfixe auf den Übergang hinzuzufügen und Regeln transformieren (-webkit-, -moz- usw.).

Answer 2

Sie können diese wie tun:

var running = false; 
$('.outer').hover(function() { 
    if (!running) { 
    running = true; 
    $(this).children('.front').slideUp(function() { 
     $(this).next('.back').slideDown(function() { 
     running = false; 
     }); 
    }); 
    } 
}, function() { 
    if (!running) { 
    running = true; 
    $(this).children('.back').slideUp(function() { 
     $(this).prev('.front').slideDown(function() { 
      running = false; 
     }); 
    }); 
    } 
}); 

Erläuterung: sobald die Animation beginnt den Status in einer Variablen speichern, um Konflikte zu vermeiden (sonst wird es wieder aufgerufen werden) . Zusätzlich mit den slideDown und slideUp kombiniert haben Sie eine viel glattere Animation. Sie hatte eine nicht sehr schön Flimmern mit Ihrer Kombination aus fadeOut und slideDown

Fiddle: https://jsfiddle.net/dL7ckq6b/

Answer 3

Mit einer kleinen Änderung an Ihrem CSS, speziell die Positionseigenschaft Ihrer Elemente absolut zu machen, wird Ihr Rückenelement von Anfang an hinter Ihrem Frontelement sein, jetzt müssen Sie nur Ihr Frontelement anzeigen/verbergen.

Javascript:

$('.outer').hover(function() { 
$('.front').slideUp(); 
    console.log("IN"); 
}, function() { 
    $('.front').slideDown(); 
    console.log("OUT"); 
}); 

ich die CSS zeigen aktualisiert wurde auch deutlicher die Wirkung geschieht.

CSS:

.outer { 
    .front, 
    .back { 
    text-align: center; 
    position: absolute; 
    padding: 20px 10px; 
    border: 2px solid yellow; 
    } 

    .front { 
    z-index: 10; 
    background-color: red; 
    } 

    .back { 
    z-index: 0; 
    background-color: blue; 
    } 
} 

Hier ist die JSFiddle: https://jsfiddle.net/z8e7eb4b/