Ich habe eine Weile gebraucht, um herauszufinden, warum meine Grenzen sindverschwanden, und ich fand heraus, dass es ein Fehler / eine Funktion von Jquery ist. Hier ist der vereinfachte Fall, der mein Problem zeigt. Ich habe zwei verschachtelte Divs. Ich animiere die Größe des äußeren Bereichs, und der Rand des inneren Bereichs wird während der Animation ausgeblendet.
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<style>
#a {
position: absolute;
top:50px;
left: 100px;
width: 88px;
height: 144px;
}
#b {
width: 100%;
height: 100%;
background: yellow;
border: 5px solid blue;
}
</style>
<h1>go</h1>
<div id="a">
<div id="b"></div>
</div>
<script>
$(function() {
$("h1").click(function() {
$("#a").animate({width:300},2000);
});
});
</script>
</html>
Wenn Sie auf "Los" klicken, wird die Hälfte des blauen Randes angezeigtwährend der Animation versteckt. Ist das ein Merkmal von Jquery? Oder einen Fehler? Gibt es eine Möglichkeit, dies zu erreichen, ohne den Randstil auf das äußere Div zu verschieben?
---- UPDATE ---- FWIW hat dazu einen Fehler in jquery eingereicht: http://bugs.jquery.com/ticket/8515
Antworten:
1 für die Antwort № 1jQuery hinzufügen overflow: hidden Stellen Sie während der Animation sicher, dass die Breite eingehalten wird.
Der Rand Ihres inneren Elements überläuft das äußere Element, so dass der Überlauf ihn beschneidet.
Die einfachste Lösung ist das Hinzufügen .css("overflow", "visible") nach der Animation.