Jquery: divje laten vliegen

Yearupie Achternaamloos

03/02/2010 17:34:00

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?

Code (php)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

$(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" });

});

Gewijzigd op 01/01/1970 01:00:00 door Yearupie Achternaamloos

PHP hulp

25/05/2012 00:53:42

Gesponsorde koppelingen:

Karl Karl

03/02/2010 18:27:00

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:00

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 (php)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

$(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" });

});

edit: ik zal zelf even kijken, dit kan ik ook wel zelf vinden..

Gewijzigd op 01/01/1970 01:00:00 door Yearupie Achternaamloos

Karl Karl

03/02/2010 18:46:00

Ja, zie ook:
http://api.jquery.com/jQuery.each/

Yearupie Achternaamloos

03/02/2010 18:49:00

Zou dit een goede opzet zijn voor de array?

Code (php)

1
2
3
4
5
6
7
8
9

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.

Jan geen

03/02/2010 19:28:00

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:00

Het beste zou zijn dat het random was,
met een bepaalde snelheid naar een bepaald punt.

Jan geen

03/02/2010 22:44:00

Leef je uit:

Code (php)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<!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>
?>

Gewijzigd op 01/01/1970 01:00:00 door Jan geen

Yearupie Achternaamloos

04/02/2010 16:30:00

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.

Gewijzigd op 01/01/1970 01:00:00 door Yearupie Achternaamloos

Yearupie Achternaamloos

04/02/2010 16:59:00

Mijn onderstaande scriptje werk niet, weet iemand wat er fout aan is?

Code (php)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$(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);
    }
});

Wim Eikelboom

04/02/2010 17:25:00

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

Yearupie Achternaamloos

04/02/2010 17:48:00

Quote:

Een script op deze pagina is bezig, of het reageert niet meer. U kunt het script nu stoppen, de scriptdebugger openen, of het script door laten gaan.

Script: http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js:27

Ik krijg deze foutmelding, ik weet niet echt wat ik hiermee moet..

Yearupie Achternaamloos

04/02/2010 20:57:00

Even scriptje van google omgezet naar me eigen server.

Ik heb het nu al een heel stuk verder, de score word alleen niet weergegeven omdat hij score2 niet vind in de hit functie. Hoe maak ik dit?

Code (php)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

$(function() {
    var left = 0;
    var step = 50;
    var count = 1;
    var max = 8;


    var left2 = 500;
    var step2 = 75;
    var count2 = 1;
    var max2 = 7;

    var score2 = 0;
    var width = 500;
    var height = 150;
    var arr = new Array(50,33,25,33,25,33,50,25);
    for (num=0;num<arr.length;num++) {

        $("#float").animate({height: arr[num]+'px',"left": "0px","top": "0px"},0);
        $("#float2").animate({height: arr[num]+'px',"left": "500px","top": "500px"},0);

        $("#float").animate({width: arr[num]+'px'},300);
        $("#float2").animate({width: arr[num]+'px'},300);

        for(i=0; i<width/step;i++) {

            $("#float").animate({
                "left": left+"px",
                "top": (Math.random()*height)+"px"
            }, 500);
            left = left + step;
            count++;

            if(count2 <= max2) {

                $("#float2").animate({
                    "left": left2+"px",
                    "top": (Math.random()*height)+"px"
                }, 500);
                left2 = left2 - step2;
                count2++;
            }

        }
        left = 0;
        left2 = 500;

        count = 1;
        count2 = 1;

        $("#float").animate({width: '0px', height: '0px'},0);
        $("#float2").animate({width: '0px', height: '0px'},0);
    }
});

function hit(addscore,div) {

    $('#score').html((score2 + addscore) + ' punten');
    score2++;
}

Yearupie Achternaamloos

05/02/2010 15:07:00

Weet iemand hier de oplossing van?

Jan geen

05/02/2010 16:11:00

score2 buiten $(function) halen

Gewijzigd op 01/01/1970 01:00:00 door Jan geen

05/02/2010 19:53:00

godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!
godverkankertyfusjood!

Yearupie Achternaamloos

05/02/2010 23:21:00

?php die(); schreef op 05.02.2010 19:53:

En jij bent ook gay!

PHPhulp is een Nederlandstalige PHP community sinds 2002. Je vindt hier PHP tutorials, PHP scripts, PHP boeken en nog veel meer. Alles is geheel gratis!