react/react.js at 1b96a42c4101bdaf6199aba0329913d513af1749 · bfl-itp/react · GitHub

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
$(document).ready(function() {
    $("#pink").hide();
    $("#purple").hide();
    $("#yellow").hide();
    $(".button").click(function() {
        $("#green").animate({
            height: "300px"
        });
        $("#blue").animate({
            height: "400px"
        });
        $("#red").animate({
            height: "500px"
        });
        $("#purple").animate({
            height: "600px"
        });
        $("#yellow").animate({
            height: "700px"
        });
        $("#pink").animate({
            height: "800px"
        });
    });
    $(".button2").click(function() {
        $(".box").animate({
            height: '50px',
            width: '300px'
        });
    });

    $(".button3").click(function() {
        $("#green").animate({
            width: "500px"
        });
        $("#blue").animate({
            width: "600px"
        });
        $("#red").animate({
            width: "700px"
        });
        $("#purple").animate({
            width: "800px"
        });
        $("#yellow").animate({
            width: "900px"
        });
        $("#pink").animate({
            width: "1000px"
        });
    });
    $(".button4").click(function() {
        $(".box").animate({
            height: '300px',
            width: '50px'
        });
        /* add after the curly bracket},1000); to set the timing of the animation*/
    });

    /*make duplicates for crazy shizzz to happen....*/
    $(".button7").click(function() {

        $("#pink").show().animate({
            top: 50,
            left: 3
        });
        $("#purple").show().animate({
            top: 70,
            left: 3
        });
        $("#yellow").show().animate({
            top: 120,
            left: 3
        });
    });


    /* reset all boxes to the original starting position and style*/
    var wide = 165;
    var high = 165;

    $(".button6").click(function() {
        $(".box").width(wide).height(high);
        $(".box").animate({
            top: 5,
            left: 3,
            opacity: 1
        });
        $("#pink").hide();
        $("#yellow").hide();
        $("#purple").hide();
    });


    /*animation....*/
    $(".button5").click(function() {
        $(".box").css({
            opacity: 0.8
        });
        var h = $(window).height();
        var w = $(window).width();
        $('.box').each(function() {
            var originalOffset = $(this).position(),
                $this = $(this),
                tLeft = w - Math.floor(Math.random() * 500),
                tTop = h - Math.floor(Math.random() * 500);

            $(this).animate({
                "left": tLeft,
                "top": tTop
            }, 2000, function() {
                $this.animate({
                    "left": originalOffset.left + 100,
                    "top": originalOffset.top - 30
                }, 3000);
            });
        });

    });
});