Button Click Animate Div Layer with jQuery

In previous jQuery animation post, the picture (curtain) Div layer will be animating to the right when the web page open. To-day, I am going to make the animation a bit different.  The picture Div layer will only be moving to the right when click on a button.

The final jQuery Animation Effect is:

The jQuery codes are also very simple:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slide Div Layer To Right with Button Click</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $("document").ready(function() {

        // Get the outer width of #picture Div layer
        var widthShift = $("#picture").outerWidth();

        $(".slideRight").click(function() {

                // Move the curtain to the right by the outer width of #picture Div layer
                //  in 5 seconds when the button is clicked.
                $("#picture").animate({ "left": "+=" + widthShift + "px" }, 5000);

            });

    });
</script>
</head>

<body>

<h1>jQuery Animate Div Layer To Right with Button Click</h1>

<div id="frame">
    <div id="pageContent"></div>
    <div id="picture"></div>
</div>

<div style="width:282px; text-align: center; margin-bottom:10px;">
    <input type="button" class="slideRight" value="Click Here Animate Curtain to Right" />
</div>

<div style="width:282px; text-align: center"></div>
</body>
</html>

In previous post, the curtain was moved by 300 pixels which is the width of the outer frame Div layer. However a better method is to get the width of the Div layer with jQuery.

// Get the outer width of #picture Div layer
var widthShift = $(“#picture”).outerWidth();

For more details of jQuery outerWidth Method, please check the jQuery tutorial below:

jQuery outerWidth Method Tutorial

The click() method will triggers the click event when an element is clicked. Same as the hover event, a function will be run or binded when the click event is triggered.

For more details of jQuery click method, please check the jQuery tutorial below:

jQuery Click Method Tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>