Animation effect
animate()
In this lesson, we will practice moving elements.
Do you see a box on top changing its color and moving back to its original position? That's animate().
So let's study animate().
jQuery
$('.hello').animate({
top:100,
left:200
});
The source above is the one that moves certain elements down.
HTML
<div class="hello"></div>
CSS
.hello{width:100px; height:50px; background:pink; position:absolute; top:50px; left:50px}
If you code like the above, it becomes the source below? Click the View on Web button to see the results.
Source
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
$('.hello').animate({
top:100,
left:200
});
});
</script>
<style type="text/css">
.hello{width:100px; height:50px; background:pink; position:absolute; top:50px; left:50px}
</style>
</head>
<body>
<div class="hello"></div>
</body>
</html>
Adjust time
$('.class_Name').animate({
},time value);
In the example above, if you set the time value to 5 seconds,
$('.hello').animate({
top:100,
left:200
},5000);
Let's test the source below.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
$('.hello').animate({
top:100,
left:200
},5000);
});
</script>
<style type="text/css">
.hello{width:100px; height:50px; background:pink; position:absolute; top:50px; left:50px}
</style>
</head>
<body>
<div class="hello"></div>
</body>
</html>
It takes 5 seconds to reach the location coordinates.
You can apply this to make things you want.
So what if you want something to happen again after moving from that source?
Let's do it again.
To end one action and then start another
function(){};
Put this part after {} of animate ({});
However, put, in front of function() {}.
animate({
},function(){
};
});
And put some behavior into {} of function() {};
$('.hello').animate({
top:50,
left:50
});
If you apply the above source
$('.class_Name').animate({
},function(){
$('.hello').animate({
top:50,
left:50
});
};
);
So let's actually apply it
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
$('.hello').animate({
top:100,
left:200
},function(){
$('.hello').animate({
top:50,
left:50
});
});
});
</script>
<style type="text/css">
.hello{width:100px; height:50px; background:pink; position:absolute; top:50px; left:50px}
</style>
</head>
<body>
<div class="hello"></div>
</body>
</html>
This application also enables the movement of hot pink boxes at the top of the course.
This concludes the course on animation effects.