JavaScript:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$("#go").click(function() {
$("#testDiv").animate({width: 400})
.animate({height: 300}, 400)
.animate({left: 200}, 500)
.animate({top: "+=100", borderWidth: 10}, "slow")});
});
</script>
<style>
#testDiv {
position:relative;
width: 150px;
height: 100px;
margin: 10px;
padding: 20px;
background: #b3c8d0;
border: 1px solid black;
font-size: 16pt;
cursor: pointer;
}
</style>
</head>
<body>
[SIZE=7]Quick jQuery Animation Intro[/SIZE]
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>
</body>
</html>scroll from right to left, when stops alert user
JavaScript:
//http://api.jquery.com/animate/
<script>
var windowWidth = $(window).width()+50;
$( "#testDiv" ).animate({
right: windowWidth
}, 4000, function() {
alert("end");
// Animation complete.
});
</script>