JQuery Animation

lisali

lisali

Erfahrenes Mitglied
Hallo,

ich würde gerne mit JQuery eine Animation abschließen, die jeweils ein verschiedenes Bild von einem Mitglied von meiner Datenbank lädt.
Also, ich habe da meine "random.php"-Datei und im div-Layer klappt soweit auch das Laden dieses Mitglieds nach Zufall:

Code: 
...

$("div#random").load("random.php");

Jetzt würde ich aber gerne, dass dieser Inhalt der random.php weggeschoben wird (nach unten) und direkt die neue Zufalls-Generierung runtergeschoben kommt. Ich denke, dass da der animate-Befehl der richtige ist, jedoch weiß ich nicht welche Parameter, usw. ich benutzen müsste, um das so zu realisieren, wie ich mir vorstelle.

Kann mir jemand helfen?

Liebe Grüße,

Lisa
 
Moin Lisa,

hier mal ein Beispiel, es nutzt dafür den Slidedown-Effekt, vielleicht inspiriert es dich ja:
Code: 
<!DOCTYPE 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://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.slide.js"></script>
<style type="text/css">
  div#divs{
        border: 1px solid black;
        width:  100px; 
        height:100px;
        overflow:hidden;
  }
  div#divs div { 
        margin: 0px; 
        height: 100px; 
        position: relative;
  }
  div#a{
        background:red
  }
  div#b{
        background:green
  }
</style>

  <script type="text/javascript">
  function fx(w)
  {
    $(w).find('div:first').slideDown('slow',function()
                                            {
                                              p=this.parentNode;
                                              $(p).find('div:last').css('display','none');
                                              $(p).find('div:last').prependTo(p);
                                            }
                                            ); 
  }
  
  </script>
</head>
<body>
<b onclick="fx('#divs')">Klick</b>
<div id="divs">
  <div id="a" style="display:none"></div>
  <div id="b"></div>
</div>
</body>
</html>

2 Div's, das erste rot und versteckt, das 2. grün und sichtbar...slideDown slidet das erste nach unten....das 2. verschwindet dadurch.

Wenn es damit fertig ist, wird eine callback-Funktion aufgerufen.
Im Beispiel lässt es die beiden divs ihre Position wechseln...du könntest dort das 2. Einfach entfernen, und stattdessen als 1. div ein neues einfügen...was dir die random.php liefert.

Demo: http://doktormolle.de/temp/344328/
 
Hi,

da nur Anweisungen aus der Standardbibliothek von jQuery verwendet werden, kann auf die UI verzichtet werden. Das spart Traffic.

Ausserdem sollte das äussere Div relativ positioniert werden, da es sonst zu Darstellungsfehlern im IE6 kommt.
Code: 
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<style type="text/css">
  div#divs{
        border: 1px solid black;
        width:  100px;
        height:100px;
        overflow:hidden;
        position: relative;
  }
  div#divs div {
        margin: 0px;
        height: 100px;
  }
  div#a{
        background:red
  }
  div#b{
        background:green
  }
</style>

  <script type="text/javascript">
  function fx(w)
  {
    $(w).find('div:first').slideDown('slow',function()
    {
      p=this.parentNode;
      $(p).find('div:last').css('display','none');
      $(p).find('div:last').prependTo(p);
    });
  }

  </script>
</head>
<body>
<b onclick="fx('#divs')">Klick</b>
<div id="divs">
  <div id="a" style="display:none"></div>
  <div id="b"></div>
</div>
</body>
</html>

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück