Posts o[js+css] jQuery Animation
Post
Cancel

o[js+css] jQuery Animation

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
        $("document").ready(function() {
            $("#go").click(function() {
                    $("#testDiv").animate({width: 400})
                    .animate({height: 300}, 400)
                    .animate({left: 200}, 500)
                    .animate({top: "+=100", borderWidth: 10}, "slow")});
        });

<style>
    #testDiv {
        position:relative;
        width: 150px;
        height: 100px;
        margin: 10px;
        padding: 20px;
        background: #b3c8d0;
        border: 1px solid black;
        font-size: 16pt;
        cursor: pointer;
    }
</style>

# Quick jQuery Animation Intro

jQuery provides some basic animation features for showing and hiding elements, as well as a low-level animation function that can be used to animate several CSS properties (as long as they are numeric).

    <button id="go">Go</button>
    <div id="testDiv"></div>

scroll from right to left, when stops alert user

1
2
3
4
5
6
7
8
9
10
11
//http://api.jquery.com/animate/

var windowWidth = $(window).width()+50;

            $( "#testDiv" ).animate({
                right: windowWidth
              }, 4000, function() {
                  alert("end");
                // Animation complete.
            });

origin - http://www.pipiscrew.com/?p=3163 jscss-jquery-animation

This post is licensed under CC BY 4.0 by the author.
Contents

Trending Tags