PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

Jquery: divje laten vliegen

Door Yearupie Achternaamloos op 03-02-2010 17:34
1.794 views
Hallo,

Ik wil mbv jquery een divje over het beeld laten gaan.
Eerst moet hij ontstaan en op het einde moet hij weg gaan.
Daar tussen moet hij een afstand overbruggen (horizontaal).

Dit moet niet gewoon in een rechte lijn maar hij moet wat op en neer gaan, dus niet zo heel simpel om op te klikken. Verder komen er ook meerdere verschillende met verschillende groten.

Zelf ben ik te werk gegaan en daar is dit komen uitrollen, maar kan dit ook korter?


$(function() {

  // Box1
  $('#box1').animate({"width" : "50px", "height" : "50px" });
  $('#box1').animate({"left" : "50px", "top" : "25px" }, 400);
  $('#box1').animate({"left" : "100px", "top" : "5px" }, 400);
  $('#box1').animate({"left" : "95px", "top" : "105px" }, 400);
  $('#box1').animate({"left" : "178px", "top" : "74px" }, 400);
  $('#box1').animate({"left" : "224px", "top" : "105px" }, 400);
  $('#box1').animate({"left" : "214px", "top" : "76px" }, 400);
  $('#box1').animate({"left" : "254px", "top" : "111px" }, 400);
  $('#box1').animate({"left" : "298px", "top" : "105px" }, 400);
  $('#box1').animate({"left" : "350px", "top" : "100px" }, 400);
  $('#box1').animate({"width" : "0px", "height" : "0px" });
  
  // Box2
  $('#box2').animate({"width" : "36px", "height" : "36px" });
  $('#box2').animate({"left" : "50px", "top" : "100px" }, 400);
  $('#box2').animate({"left" : "100px", "top" : "74px" }, 400);
  $('#box2').animate({"left" : "95px", "top" : "84px" }, 400);
  $('#box2').animate({"left" : "178px", "top" : "74px" }, 400);
  $('#box2').animate({"left" : "224px", "top" : "65px" }, 400);
  $('#box2').animate({"left" : "214px", "top" : "55px" }, 400);
  $('#box2').animate({"left" : "254px", "top" : "45px" }, 400);
  $('#box2').animate({"left" : "298px", "top" : "50px" }, 400);
  $('#box2').animate({"left" : "350px", "top" : "100px" }, 400); 
  $('#box2').animate({"width" : "0px", "height" : "0px" }); 
  
  // Box3
  $('#box3').animate({"width" : "24px", "height" : "24px" });
  $('#box3').animate({"left" : "50px", "top" : "75px" }, 400);
  $('#box3').animate({"left" : "100px", "top" : "95px" }, 400);
  $('#box3').animate({"left" : "95px", "top" : "87px" }, 400);
  $('#box3').animate({"left" : "178px", "top" : "98px" }, 400);
  $('#box3').animate({"left" : "224px", "top" : "87px" }, 400);
  $('#box3').animate({"left" : "214px", "top" : "89px" }, 400);
  $('#box3').animate({"left" : "254px", "top" : "79px" }, 400);
  $('#box3').animate({"left" : "298px", "top" : "98px" }, 400);
  $('#box3').animate({"left" : "350px", "top" : "99px" }, 400); 
  $('#box3').animate({"width" : "0px", "height" : "0px" });        

});
?
Onbekende gebruiker
03-02-2010 18:27
Het kan sowieso gechained, dus je hoeft niet iedere keer $('#box3') te doen, maar je kunt dus $(blaat).animate(bl).animate(bo).etc... doen.
Yearupie Achternaamloos
03-02-2010 18:38
Ik ben niet zo heel erg thuis is javascript, maar is het mogelijk om een array te maken met left en top erin en dan een foreach die de animatie achter elkaar uitvoert?

[code]
$(function() {

// Box1
$('#box1').animate({"width" : "50px", "height" : "50px" })
.animate({"left" : "50px", "top" : "25px" }, 400)
.animate({"left" : "100px", "top" : "5px" }, 400)
.animate({"left" : "95px", "top" : "105px" }, 400)
.animate({"left" : "178px", "top" : "74px" }, 400)
.animate({"left" : "224px", "top" : "105px" }, 400)
.animate({"left" : "214px", "top" : "76px" }, 400)
.animate({"left" : "254px", "top" : "111px" }, 400)
.animate({"left" : "298px", "top" : "105px" }, 400)
.animate({"left" : "350px", "top" : "100px" }, 400)
.animate({"width" : "0px", "height" : "0px" });

// Box2
$('#box2').animate({"width" : "36px", "height" : "36px" })
.animate({"left" : "50px", "top" : "100px" }, 400)
.animate({"left" : "100px", "top" : "74px" }, 400)
.animate({"left" : "95px", "top" : "84px" }, 400)
.animate({"left" : "178px", "top" : "74px" }, 400)
.animate({"left" : "224px", "top" : "65px" }, 400)
.animate({"left" : "214px", "top" : "55px" }, 400)
.animate({"left" : "254px", "top" : "45px" }, 400)
.animate({"left" : "298px", "top" : "50px" }, 400)
.animate({"left" : "350px", "top" : "100px" }, 400)
.animate({"width" : "0px", "height" : "0px" });

// Box3
$('#box3').animate({"width" : "24px", "height" : "24px" })
.animate({"left" : "50px", "top" : "75px" }, 400)
.animate({"left" : "100px", "top" : "95px" }, 400)
.animate({"left" : "95px", "top" : "87px" }, 400)
.animate({"left" : "178px", "top" : "98px" }, 400)
.animate({"left" : "224px", "top" : "87px" }, 400)
.animate({"left" : "214px", "top" : "89px" }, 400)
.animate({"left" : "254px", "top" : "79px" }, 400)
.animate({"left" : "298px", "top" : "98px" }, 400)
.animate({"left" : "350px", "top" : "99px" }, 400)
.animate({"width" : "0px", "height" : "0px" });

});
[code]

edit: ik zal zelf even kijken, dit kan ik ook wel zelf vinden..
Yearupie Achternaamloos
03-02-2010 18:49
Zou dit een goede opzet zijn voor de array?

var box = array();
	box[1] = array(
		// 'grote','gegevens'
		'50px',array(
			// 'left','top','tijd interval'
			'50px;','25px;','400',
			'100px;','5px;','400',
		)
	);


Hierin heb ik de grote (width en height), en een array met posities en tijd interval.
J
Jan geen
03-02-2010 19:28
Moet het divje het door jou opgegeven pad volgen of mag dat ook random zijn? Als het ook random mag zijn kan je de left-margin ophogen en de top-margin random genereren
Yearupie Achternaamloos
03-02-2010 21:05
Het beste zou zijn dat het random was,
met een bepaalde snelheid naar een bepaald punt.
J
Jan geen
03-02-2010 22:44
Leef je uit:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<script src="jquery-1.3.2.js"></script>
		
		<script type="text/javascript">
			$(function() {
				var left = 0;
				var step = 50;
				var width = screen.width-200;
				var height = screen.height - 200;
				$("#float").hide().fadeIn(2000);
				for(i=0; i<width/step;i++) {
					$("#float").animate({
						"left": left+"px",
						"top": (Math.random()*height)+"px"
					}, 100);
					left = left + step;
				}
				$("#float").fadeOut();								
			});
		</script>
		
		<style type="text/css">
			
			#float {
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
			}
		</style>
	</head>
	<body>
		
		<div id="float"></div>
	</body>
</html>
?>
Yearupie Achternaamloos
04-02-2010 16:30
Leuk gemaakt!
Alleen vliegt hij soms onder een deel of helemaal uit me beeldscherm, is dit op te lossen?

edit: ik weet al hoe het komt, in mijn browser is boven en onder nog een balk, waardoor er minder plaats is dan de beeldscherm hoogte.

edit2: Dit is geen probleem meer, ik heb de breedte en hoogte allebei op 500 px gezet zodat hij in me lay-out past.
Yearupie Achternaamloos
04-02-2010 16:59
Mijn onderstaande scriptje werk niet, weet iemand wat er fout aan is?
$(function() {
    var left = 0;
    var step = 50;
    var width = 500;
    var height = 500;
    var size = 50;
    var arr = new Array(50,25,20,35,15);
    for (num=0;num<arr.length;i++) {
	    
	    $("#float").animate({height: arr[num]+'px',"left": "0px","top": "0px"});
	    $("#float").animate({width: arr[num]+'px'},100); 
	     
	    for(i=0; i<width/step;i++) {
	        $("#float").animate({
	            "left": left+"px",
	            "top": (Math.random()*height)+"px"
	        }, 300);
	        left = left + step;
	    }
	    
	    $("#float").animate({marginLeft:'50px',width: '0px'},100);  
    }                          
});
W
Wim E
04-02-2010 17:25
Al gekeken of je kon oplossen met firebug? Er wordt je zoveel aangeboden, zo leer je het natuurlijk zelf ook nooit.
Ok ok het klopt dat je altijd wel kunt vragen, maar eerst kijken en dan vragen:-) evt kun je alerts toevoegen om te kijken wat voor uitkomsten dat geeft...en ga zo maar verder

Reageren

Inloggen om te reageren