Jquery Animation
Advertisements
Animation
Jquery animation() are used to create custom animation on web page.
Syntax
$(selector).animate({params},speed,callback);
- Here speed parameter is optional, speed parameter specifies the speed of the hiding/showing, and can take values: "slow", "fast", or milliseconds.
- callback parameter is optional, callback parameter is a function to be executed after the hide() or show() method completes.
Example of animation in jQuery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '450px'});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<div style="background:#3399FF;height:100px;width:106px;position:absolute;"></div>
</body>
</html>
Output
Note: you can format above code like you want, including line breaks. JQuery is not very strict on the syntax.
Syntax
<script>
$(document).ready(function(){
$("button").click(function(){
$("#para").css("color", "blue")
.slideUp(2000)
.slideDown(2000);
});
});
</script>
Google Advertisment