Höhe 100% zu hoch
- Themenstarter MatthiasGi
- Beginndatum
MatthiasGi
Grüner Idealist
Ja, das ist klar. Aber der blind effect wirkt hier horizontal, d.h. die Höhe bleibt erhalten... Nur width wird = 0...
M
Maik
Nicht ganz, denn am Ende der Animation besitzt das Objekt die Eigenschaft display:none, und somit auch keine Höhe, da dieser Eigenschaftswert keinen Platzhalter im Textfluß bereithält.
Hier ein kleines Testbeispiel, wie sich der anschliessende Textabsatz im Textfluß verhält, wenn das Objekt ausgeblendet wurde:
mfg Maik
Hier ein kleines Testbeispiel, wie sich der anschliessende Textabsatz im Textfluß verhält, wenn das Objekt ausgeblendet wurde:
HTML:
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script src="http://jqueryui.com/latest/ui/effects.core.js"></script>
<script src="http://jqueryui.com/latest/ui/effects.blind.js"></script>
<style type="text/css">
div { margin: 0px; width: 100px; height: 80px; background: green; border: 1px solid black; position: relative; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function () {
$(this).hide("blind", { direction: "horizontal" }, 1000);
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div></div>
<p>foobar</p>
</body>
</html>mfg Maik
MatthiasGi
Grüner Idealist
Aber während die Animation läuft sollte die Höhe doch da bleiben?
Wenn das so ist, wie bekomme ich es hin, dass die Höhe 100% bleibt?
Wenn das so ist, wie bekomme ich es hin, dass die Höhe 100% bleibt?
M
Maik
Während der Animation besitzt das Objekt seine deklarierte Höhe, am Ende nicht mehr, und dann rutscht der anschliessende Textabsatz nach oben. Sieht man das nicht in meinem Demo?
Anstelle der in der hide()-Funktion genutzten display-Eigenschaft mit dem Wert none, ist hier visibility:hidden der Schlüssel zum Erfolg, da mit dieser CSS-Eigenschaft das versteckte Element einen Platzhalter im Textfluß reserviert - in deinem Fall dann die Höhenangabe.
mfg Maik
Anstelle der in der hide()-Funktion genutzten display-Eigenschaft mit dem Wert none, ist hier visibility:hidden der Schlüssel zum Erfolg, da mit dieser CSS-Eigenschaft das versteckte Element einen Platzhalter im Textfluß reserviert - in deinem Fall dann die Höhenangabe.
mfg Maik
MatthiasGi
Grüner Idealist
Wie genau meinst du, soll ich das umsetzen?
Die .animate-Funktion nutzen?
Die .animate-Funktion nutzen?
M
Maik
Beispielsweise so (jquery.js):
Aus
wird
mfg Maik
Aus
Javascript:
hide: function(speed,callback){
if ( speed ) {
return this.animate( genFx("hide", 3), speed, callback);
} else {
for ( var i = 0, l = this.length; i < l; i++ ){
var old = jQuery.data(this[i], "olddisplay");
if ( !old && old !== "none" )
jQuery.data(this[i], "olddisplay", jQuery.css(this[i], "display"));
}
// Set the display of the elements in a second loop
// to avoid the constant reflow
for ( var i = 0, l = this.length; i < l; i++ ){
this[i].style.display = "none";
}
return this;
}
},wird
Javascript:
hide: function(speed,callback){
if ( speed ) {
return this.animate( genFx("hide", 3), speed, callback);
} else {
for ( var i = 0, l = this.length; i < l; i++ ){
var old = jQuery.data(this[i], "olddisplay");
if ( !old && old !== "hidden" )
jQuery.data(this[i], "olddisplay", jQuery.css(this[i], "visibility"));
}
// Set the display of the elements in a second loop
// to avoid the constant reflow
for ( var i = 0, l = this.length; i < l; i++ ){
this[i].style.visibility = "hidden";
}
return this;
}
},mfg Maik
MatthiasGi
Grüner Idealist
Das Problem ist dann aber, dass ich die jquery.js verändern muss, und wenn ich die Funktion im "normalen" Zusammenhang benutzen will, habe ich ein Problem. Zweites Problem: Die Datei ist komprimiert 
Ich dachte mir, dass ich vorher width speichere und dann in der Animation width auf 0 setze. Gute Idee?
Ich dachte mir, dass ich vorher width speichere und dann in der Animation width auf 0 setze. Gute Idee?
