Jump to Table of Contents

Example: Multiple Instances

This example shows how to work with multiple YUI instances.

Setting up the first YUI Instance

Here we will create our first YUI instance and tell it to load the anim module.

YUI().use('anim', function(Y) {

});

Using Animation

Now let's setup a simple animation on the Node #demo.

YUI().use('anim', function(Y) {
    var anim = new Y.Anim({
        node: '#demo',
        to: {
            height: 50,
            width: 150
        },
        from: {
            height: 100,
            width: 100
        },
        direction: 'alternate',
        iterations: 30,
        duration: .5
    });
    anim.run();
});

Setting up the second YUI Instance

Here we will create our second YUI instance and tell it to load the dd-drag module.

Since we didn't specify the anim module, we will not have access to it in this instance.

YUI().use('dd-drag', function(Y) {

});

Making the node draggable

Now let's make the same node draggable (while it's animated).

YUI().use('dd-drag', function(Y) {
    var dd = new Y.DD.Drag({
        node: '#demo'
    });
});

Full Example Source

<style>
    #demo {
        height: 100px;
        width: 100px;
        border: 1px solid black;
        background-color: #8DD5E7;
        cursor: move;
    }
    #play {
        height: 200px;
    }
</style>

<div id="play">
    <div id="demo"></div>
</div>

<script>
YUI().use('anim', function(Y) {
    var anim = new Y.Anim({
        node: '#demo',
        to: {
            height: 50,
            width: 150
        },
        from: {
            height: 100,
            width: 100
        },
        direction: 'alternate',
        iterations: 30,
        duration: .5
    });
    anim.run();
});

YUI().use('dd-drag', function(Y) {
    var dd = new Y.DD.Drag({
        node: '#demo'
    });
});

</script>