Zum Inhalt springen

contentbox reinsliden mit jquery?

Erstellt am 5. August 2013 · 1 Antwort · letzte Antwort am 6. August 2013

Tags: Frage

cato ·

Hallo an Alle,
ich habe von meinem Auftraggeber die Order, die Contentbox wie auf der Seite www.perfekte-zähne.net reinsliden zu lassen. Leider hab ich es bisher nicht hinbekommen. Wer kann mir da helfen.

Bis dato hab ich zwei Contentspalten (normal und right) mit z-index übereinander gehauen. Was mir fehlt, ist die Animation, mit jquery müsste das doch möglich sein oder? Hab mit T3jquery rumprobiert, bisher ohne Erfolg. Wäre echt nett, wenn ihr mir da ein bissl helfen könntet, wie ich das anstellen muss.

sunixzs ·

So könnte es aussehen:

<div
  id="myContentContainer"
  style="position: relative; width: 1000px; height: 500px; overflow: hidden;">
  <div
    id="myContent"
    style="position: absolute; top: 0; right: 0; height: 500px; max-width: 300px;">
    Das hier ist mein Content.
  </div>
</div>
<script>
// content so schnell es geht per JavaScript verbergen
// content ist somit ohne JavaScript (oder mit JavaScript-Fehlern) fuer den User sichtbar
document.getElementById("myContent").style.display = "none"; 

// jQuery ready-Event abwarten
$(document).ready(function () {
  $("#myContent")
    // nach dem Laden der Seite den Content verborgen positionieren
    .css({ right: obj.width() * -1})
    // danach sichtbar machen
    .show()
    // und abschliessend den Content animiert auf die Ursprungsposition setzen
    .animate({ right: 0 }, 500); 
});
</script>

… nicht getestet, aber so oder so ungefähr sollte es gehen.

LG sun