Slide from left to right

[nordi]

Hi,

ich hab ein kleines Problem. Ich würde gerne ein Bild (welches sich einem Div befindet) nachdem die Seite geladen wurde vom linken Bildschirmrand zum rechten Bildschirmrand sliden lassen.

<script type="text/javascript">

    $(window).load(function() {
      $(".test").show("slide", { direction: "right" }, 1000);
    });

  </script>

CSS wäre dann so

  .test
  {
    position:absolute; 
    top: 200px;   
    left: -100px;
    height:40px;    
    width: 100px; 
    background-color:#ff5056;
    display:block;
    z-index: 99999;
  }

Es bewegt sich aber nichts.. bin ziemlicher Neuling, was jQuery angeht. Bin für jeden Tipp sehr dankbar!

 

[ikosaeder]

Ich hätte folgende Lösung anzubieten:

var moveDiv = (function(w, d) {
    var i    = 1,
        val    = w.innerWidth - 150,
        loop;

    var loop = function loop () {
        val -= 1;
        if (val > 0) {
            po = val + "px";
            d.getElementById("move").style.left=String(po); //Style eines Divs aendern, hier die Position
        }
        else {
           val = w.innerWidth;
           po = val + "px";
           d.getElementById("move").style.left = po;
           i = 1;
        }
    }

    return function () {
        w.setInterval(loop, 20);  //Der Loop
    };
}(window, document));

Code css:

1 2 3 4 5 6

#move{ position: fixed; bottom:15px; width: 150px;height: 2em; z-index: 100; }

 

[tombe]

jQuery biete dafür die animate-Methode an:

$(document).ready(function() {
// "pic" ist die ID des Bildes
pos = $(document).width() - $("#pic").width();
$("#pic").animate({"left": pos}, "slow");
});

 

[nordi]

@tombe: Super, das klappt schonmal prima! Momentan bleibt das Bild dann rechtsbündig am Rand stehen. Kann ich es auch komplett aus dem Seite fahren lassen? Kann ich via jQuery auch mit der Transparenz spielen? Also dass es eventuell beim sliden ausfadet oder ähnliches?

 

[tombe]

Im Beispiel wird als Endposition ja "Seitenbreite - Bildbreite" gesetzt. Wenn das Bild ganz verschwinden soll, dann ändere es einfach so ab das die Bildbreite dazugezählt und ncht abgezogen wird. Transparenz geht auch:

pos = $(document).width() + $("#pic").width();
$("#pic").animate({left: pos, opacity: 0}, 5000);

Hier ist jetzt auch die Zeit angegeben (5 Sekunden) die es dauert bis das Bild verschwunden ist.

 

[nordi]

Wollte meine Frage fast schon selber beanworten. Klappt super! Lese gerade darüber, wie man Animationen wiederholt.

$(document).ready(function() {

loop();

});

function loop() {
  pos = $(document).width() + $("#pic").width();
  $("#pic").animate({left: pos, opacity: 0}, 2000, loop);
}

Das klappt nicht, liegt das daran, dass das Objekt #pic vorher ausgeblendet wurde? Habe auch gerade gesehen, dass sich unten ein horizontaler Scrollbalken bildet, wenn das Bild sich rechts aus dem Bildschirm schiebt.

 

[tombe]

Du musst die CSS Angaben wieder auf die ursprünglichen Werte einstellen:

$(document).ready(function() {
    loop();
});

function loop() {
// Standardwerte einstellen
    $("#pic").css({"left": "0", "opacity": "100"});
// Minus nicht Plus !!
    pos = $(document).width() - $("#pic").width();
    $("#pic").animate({"left": pos, opacity: 0}, 5000, loop);
}

Was das Problem mit der Bildlaufleiste angeht, dann (wie oben zu sehen) doch die Breiten voneinander abziehen.