jQuery - CSS3 Transitions dynamisch starten mit Zufallswerten

B

BoR

Mitglied
Hallo,
hier mal wieder eine Frage von mir. Aber zuerst der Code (kurzes HTML-Beispiel, dass ich schnell gebaut hab, um nicht zu viel verwirrenden Code posten zu müssen bei meinem aktuellen Vorhaben).

HTML: 
<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            
    <title>Test</title>
        
    <style type="text/css">
      #start {
        position: absolute;
	top: 20px;
	left: 20px;
	padding: 10px;
	background-color: #000;
	color: #FFF;
	cursor: pointer
      }
			
      .box {  
        position: absolute;
	width: 300px;  
	height: 300px;
	top: 50px;
	left: 100px;
	background: #469DFA
      }  
				  
      .box-change {
	top: 500px
      }
    </style>
  </head>

  <body>
    <div id="start">&uarr;&nbsp;&darr;</div>
        
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function()
      {	
        $("body").append("<div class='box'></div>");
	$(".box").css({"transition": "top 0.5s linear", "-webkit-transition": "top 0.5s linear"});
	$("#start").click(function()
	{
	    $(".box").addClass("box-change");
	});
      });
    </script>
  </body>
</html>

Ich habe folgendes Problem. In diesem Beispiel habe ich über style im head die Werte für top in beiden Klassen angegeben und reiche die Werte für die Transition mittels jQuery nach. Über den Container start kann ich die Box runter fahren lassen.
Dies soll allerdings alles automatisch geschehen (die Zeit der Transition wird ebenfalls per Zufall berechnet, ebenso wie die Richtung ob hoch oder runter). Heisst, ich möchte den Wert top für .box ebenfalls per Zufall generieren lassen.

1. Wert für top aus .box entfernt; Beispiel ohne Zufall, aber nachträglich eingefügt:
Code: 
$(document).ready(function()
{	
  $("body").append("<div class='box'></div>");
  $(".box").css("top", "50px").css({"transition": "top 0.5s linear", "-webkit-transition": "top 0.5s linear"});
  $("#start").click(function()
  {
    $(".box").addClass("box-change");
  });
});

Nun reagiert die Box aber nicht mehr.

2. Ohne Klick-Event, Wert für top in .box vorhanden, ohne nachträgliches Einfügen:
Code: 
$(document).ready(function()
{	
  $("body").append("<div class='box'></div>");
  $(".box").css({"transition": "top 0.5s linear", "-webkit-transition": "top 0.5s linear"}).addClass("box-change");
});

Nun springt die Box direkt auf den Wert top: 200px ohne Transition.

Gibt es eine Möglichkeit die Werte zufällig genieren zu lassen und die Transition automatisch zu starten? Oder beachte ich einfach etwas nicht? Wie müsste ich vorgehen, um mein Vorhaben umzusetzen?

Gruß Lars
 
Zuletzt bearbeitet:
Das Problem unter Punkt 2 könnte ich durch ein simples setTimeout umgehen.

Code: 
$(document).ready(function()
{	
  $("body").append("<div class='box'></div>");
  $(".box").css({"transition": "top 1s linear", "-webkit-transition": "top 0.5s linear"});
  setTimeout(function()
  {
    $(".box").addClass("box-change");
  },0);
});

Das Problem mit dem nachträglich eingefügten Wert für top besteht weiterhin.
 
Hi,

versuch mal, die Reihenfolge umzudrehen:
1. die CSS-Werte setzen
2. das Element einbinden
Code: 
$(document).ready(function(){
    // 1.
    $(".box").css({
        "top": "50px",
        "transition": "top 0.5s linear", 
        "-webkit-transition": "top 0.5s linear"
    });

    // 2.
    $("body").append("<div class='box'></div>");

    
    $("#start").click(function(){
        $(".box").addClass("box-change");
    });
});
Ciao
Quaese
 
Leider nicht. Da das Element nicht existiert, können auch keine style-Elemente zugewiesen werden. Bei diesem Aufbau wird der erste Teil komplett "ignoriert", der Container wird bei Position [100/0] eingefügt und springt bei einem Klick direkt auf Position [100/500].
 
Hi,

versuch mal, die transition erst im Event zuzuweisen:
Code: 
$(document).ready(function(){
    $("body").append("<div class='box'></div>");
    
    $(".box").css({
        "top": "50px"
    });
    
    $("#start").click(function(){
        var top = parseInt($('.box').css('top'))===50 ? 500 : 50;
    
        $(".box").css({
            "top": top + "px",
            "transition": "top 1s linear", 
            "-webkit-transition": "top 1s linear"
        });
        
        $(".box").addClass("box-change");
    });
});
Online: http://jsfiddle.net/Quaese/92eFX/

Ciao
Quaese
 
Werds mir morgen mal anschauen. Hab heut kein Geist mehr den Rechner anzumachen. Dennoch danke schonmal im Voraus. :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück