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:
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:
Leave a Reply