jQuery: divs bewegen

[lascaux]

Hallo,

ich komm gleich mal zur Sache:

Javascript Teil:

  var bw = window.innerWidth;

// Bestimmung der display-Boxen
  $('.display').css({
    height: 500,
    width: bw,
    position: 'absolute',
    left: bw
  });

// display-Box #p1 auf 0 setzen
  $('.display').css({
    left: 0
  });

  $('.punkt1').click(function() {
    $('.display').animate({
      left: bw
    }, 400, function() {
      $('#p1').animate({
        left: 0
      }, 400);
    });
  });

  $('.punkt2').click(function() {
    $('.display').animate({
      left: bw
    }, 400, function() {
      $('#p2').animate({
        left: 0
      }, 400);
    });
  });

  $('.punkt3').click(function() {
    $('.display').animate({
      left: bw
    }, 400, function() {
      $('#p3').animate({
        left: 0
      }, 400);
    });
  });

  $('.punkt4').click(function() {
    $('.display').animate({
      left: bw
    }, 400, function() {
      $('#p4').animate({
        left: 0
      }, 400);
    });
  });

HTML Teil:

  <ul>
    <li class="punkt1">Punkt 1</li> <!-- usw -->
  </ul>
---
  <div class="display" id="p1">
    <!-- viel inhalt -->
  </div>
  <div class="display" id="p2">
    <!-- sehr viel inhalt -->
  </div>
  <div class="display" id="p3">
    <!-- nicht ganz soviel inhalt -->
  </div>
  <div class="display" id="p4">
    <!-- noch mehr inhalt -->
  </div>

Mein Gedanke ist nun, dass die momentan aktive (sichtbare) Box (in dem Fall p1) rechts raus fährt und dann die neu angewählte (zB p3) hinein fährt. In der Theorie recht simpel (wenn man jQuery/Javascript) versteht. In der Theorie verhält sich das ganze mit leichten Mängeln.

Hin und wieder fährt schon die neu aktivierte Box hinein während die ausfahrende Box gerade mal bei 50% ist und anders herum. So Sachen wie .delay(100) werden völlig ignoriert. Und ich bin langsam am verzweifeln.

Ich bin für jeden Denkanstoß sehr dankbar.

 

[Tronjer]

Deine animate() sind nicht chained. Wirf mal einen Blick in die Doku.

$( "#go2" ).click(function() {
  $( "#block2" )
    .animate({ width: "90%" }, 1000 )
    .animate({ fontSize: "24px" }, 1000 )
    .animate({ borderLeftWidth: "15px" }, 1000 );
});

 

[lascaux]

Super, vielen Dank!