Key events demo

You can set up key events on each animation in the animation query. The events are bound to browser window.

Watch the address bar to see the demo

This demo shows binding of key events for animations. If you set a text link as keypress handler the script automatically recognizes it and calls the window.open() function with that link. The keypress handler can be also any function you want.

  
<script type="text/javascript">
    $(document).ready(function(){
        $("Push the space key").urlAnim({ 
            align: "center",
            type: "bounce",
            duration: 2000,
            repeat: 0,
            query: {
                name: "space",
                keyEvent: {
                    key: "space",
                    handler: function(){
                        $().urlAnim("start", "enter");
                    }
                }
            }
        });
                
        $("Push the enter key").urlAnim({ 
            align: "center",
            type: "scrollRight",
            duration: 2000,
            repeat: 0,
            query: {
                name: "enter",
                autostart: false,
                keyEvent: {
                    key: "enter",
                    handler: function(){
                        $().urlAnim("start", "m");
                    }
                }
            }
        });
                
        $("Push the M key").urlAnim({ 
            align: "center",
            type: "chaos",
            duration: 2000,
            repeat: 1,
            query: {
                name: "m",
                autostart: false,
                repeat: 0,
                keyEvent: {
                    key: 109,
                    handler: function(){
                        $().urlAnim("start", "n");
                    }
                }
            }
        });
                
        $("Push the N key").urlAnim({ 
            align: "center",
            type: "randomShow",
            duration: 2000,
            repeat: 1,
            query: {
                name: "n",
                autostart: false,
                repeat: 0,
                keyEvent: {
                    key: 110,
                    handler: function(){
                        $().urlAnim("start", "space");
                    }
                }
            }
        });
    });
</script>