Ich versuche, ein div mit Kind divs, die 2 oder mehr Spalten bilden, möchte ich dann in der Lage sein, alle Spalten auf einmal erscheinen mit einem jquery ui Blind-Effekt und dann nach einer Verzögerung ausblendet. Aber wenn ich das tue, erscheinen die Spalten, aber nicht mit Blind-Effekt, sie erscheinen nur auf einmal, der Ausblendeffekt funktioniert jedoch gut. Wenn ich den Float-Stil von den Child-Divs entferne, funktioniert der Blind-Effekt, aber sie bilden keine Side-by-Side-Spalten. Also meine Fragen sind, soll das so sein? Ist eine andere Art, wie ich Spalten in HTML für diese Arbeit bilden sollte? Oder verwende ich jquery ui nicht richtig? Jede Hilfe wird geschätzt.jquery ui show() Methode funktioniert nicht korrekt auf Div mit Floating Kind divs
Eine vereinfachte Version meiner html ist wie folgt:
<style type="text/css">
.displayBox {width:440px; margin:0 auto; display:block;}
.column { width:200px; }
.left { float:left; }
.right { float:right; }
</style>
<script type ="text/javascript">
$(function() {
function callback() {
setTimeout(function() {
$("#box:visible").removeAttr("style").fadeOut();
}, 2000);
};
// set effect from select menu value
$("#clickme").click(function() {
$("#box").show("blind", { diection: "up" }, 1000, callback);
});
});
</script>
<div>
<input id="clickme" type="button" value="click" name="click" />
</div>
<div id="box" class="displayBox">
<div class="left column">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br /><br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
<div class="right column">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br /><br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
Ah alles zu einfach vielen Dank – dwperrin
Np, froh zu helfen! –