dropTo/demo.htm at master · faceach/dropTo · 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
<!DOCTYPE html>
<html>
    <style>
    html { direction: ltr; }
    body { padding: 20px; margin: 10px; }
    .highlight { border: 3px dotted #82C0D2; }

    .nested-wrapper { height: 400px; width: 400px; background: blue; }
    .nested-fleft { float: left; background: green; }
    .nested-fright { float: right; background: darkgreen; }
    .nested-relative { position: relative; background: yellow; height: 200px; width: 200px; left: 50px; top: 100px;}
    .nested-newformatcontext { overflow: hidden; background: red; }

    .highlight-text {  background-color: #DBD9C8; border: 1px solid #000;}
    </style>
<body>
<div class='demoArea'>
    <div class='nested-wrapper'>

        <div class='nested-fleft'>
            float left
        </div>

        <div class='nested-fright'>
            float right
        </div>

        <div class='nested-newformatcontext'>
            <div class='nested-fleft'>
                float left
            </div>

            <div class='nested-fright'>
                float right
            </div>
        </div>

        <div class='nested-relative'>
            <div class='nested-fleft'>
                float left
            </div>

            <div class='nested-fright'>
                float right
            </div>
        </div>
    </div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js'></script>
<script src='./dropTo.js'></script>
<script>
    !function($){
        var clickCollection = {};

        highlight = $('<div class="highlight"></div>');
        $('.demoArea *:not(.highlight, .highlight-text)').live('click', function(evt){
            var el = $(this);

            highlight
                .detach()

                .html('<div class="highlight-text">' + el.attr('class') + '</div>')
                .css({
                    width: el.innerWidth(),
                    height: el.innerHeight()
                })

                .show()
                .appendTo(document.body)
                .dropTo(el).atMiddle().atCenter()
                    .find('.highlight-text')
                    .dropTo(highlight).outerBottom().innerLeft();

            evt.stopPropagation();
        });

        $('.highlight').live('click', function(evt){
            var el = $(this);
            el.hide();

            var eventTarget = $(document.elementFromPoint(evt.pageX, evt.pageY));
            eventTarget.trigger('click');

            evt.stopPropagation();
        });

        // dom ready
        $(function(){
            highlight.appendTo(document.body).hide();
        });
    }(jQuery);

    function startAnimation(){
        $('.highlight-text')
            .dropTo(highlight)
                .innerBottom(0, true)
                .innerRight(0, true)
                .innerTop(0, true)
                .innerLeft(0,{complete: startAnimation});
    }

    function startCachedAnimation(){
        $('.highlight-text')
            .dropTo({
                target: highlight
            })
                .innerTop(0, {dtDelay: true})
                .innerRight(0, true)
                .innerBottom(0, {dtDelay: true})
                .innerLeft(0, {complete: startCachedAnimation});

    }
</script>
<br /><br />
<button onclick='startAnimation()'>Start animation</button>
<button onclick='startCachedAnimation()'>Start delay animation</button>
</body>
</html>