Situatie
jQuery is a very powerful JavaScript framework.Using jQuery, we can add special effects to our website or web-based application.
In jQuery, we can produce various types of animation using the animate() method. This method can produce simple to complex animation in the web page. Using animation, we can change the properties of HTML elements such as background colour, changing border styles, changing navigation properties, formatting the font properties, etc.
We apply changes to the properties by providing the styles rules in the params parameter of the method.
Syntax:
$("selector").animate({params}, speed, callback);
where
- params parameter specifies the CSS property to be changed during execution of animate() method . It is the required parameter.
- speed parameter specifies the speed at which the effect is applied .They can accept only these values : “slow”, “fast” or milliseconds.
- call back parameter specifies the function to be executed after the execution of animate() method.
Solutie
Pasi de urmat
<!DOCTYPE html>
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/
libs/jquery/3.3.1/jquery.min.js”>
</script>
<style type=”text/css”>
div {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div></div>
<br/>
<button id=”animate”>Animate Me</button>
<script type=”text/javascript”>
$(“#animate”).click(function() {
$(“div”).animate({
width: “200px”,
height: “200px”,
borderRadius: “50%”,
marginLeft: “210px”,
marginTop: “70px”,
},
2000,
);
});
</script>
</body>
</html>
Output:
Before the Animate Me is clicked
After the Animate Me is clicked
Leave A Comment?