Animating elements with jQuery

In the session we look at using the jQuery library to animate elements on the page. This will allow us to write much more interactive software with game features that respond to user input.

Our examples should come from various jQuery tutorial found on the web. Perhaps the simplest are those found at http://w3school.com/jquery.

One thing that can be problematic is loading the jQuery library as many examples expect that this library is in the same folder as the page being executed. For more flexible development, it is probably better to get this script from a CDN (content delivery network) like from Google, Microsoft, etc. Our samples get the code from code.jquery.com, so making sure to have this line in the header will resolve the issue:

        <script src="http://code.jquery.com/jquery-latest.min.js"></script>

Selectors

An important concept to be learned with jQuery is that of selectors which is how one identifies the elements on the page to animate, etc. Essentially, if you are targeting all tags of a given type, like img, you simply use that tag as a selector. If you only want to apply affect to a single element, you should give an id attribute to that tag and then target it with # proceeding the given id. If you want to apply an effect to all elements of a particular class, proceed the class name with a period (.).

Sample starting code

We used the starter code in class for students begin experimenting. They then customized the code based on tutorials found at http://w3school.com/jQueary as well as other sites

<!DOCTYPE html>
<html>
    <head>
        <title>Tago 7</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script> $(document).ready(function() {

            $("#toggle").click(function(e){
                e.preventDefault();
                $('#firstdiv').toggle();
            });

            $('#blink').click(function(){
                $('.bildo').fadeTo("slow", .2);
                $('.bildo').fadeTo("slow", 1);
            });

            $('#animate').click(function(){
                // alert('hi');
                $("#movi").animate({height:300},"slow");
                $("#movi").animate({width:300},"slow");
                $("#movi").animate({height:100},"slow");
                $("#movi").animate({width:100},"slow");
            });
        });

        </script>
        <style type="text/css">
            body {
                background-image:url("http://bazaesperanto.com/bildoj/fonoj/GinghamiPad.jpg");
            }
        </style>
    </head>
    <body>
        <div id="firstdiv" class="vorto">Saluton!</div>
        <button id="toggle">toggle</button>
        <div id="firstbildo" class="bildo"><img data-sono ="sono1" src="http://bazaesperanto.com/bildoj/1.png"/></div>
        <button id="blink">blink</button>
        <div id="movi" style="background:#98bf21;height:100px;width:200px;position:relative">movi</div>
        <button id="animate">movi</button>
    </body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s