<!DOCTYPE html>
<html>
<head>
<title>jQuery - Bài 1</title>
<meta charset="utf-8">
<!-- <script src="jquery-3.5.1.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
.dev1{
background: green;
width: 60%;
height: 300px;
box-shadow: 0 0 10px green;
position: relative;
}
</style>
</head>
<body>
<script>
$(function(){
//Hide/Show:
$(".hide").click(function(){
$(".dev1").hide("slow");
});
$("#show").click(function(){
$(".dev1").show("fast");
});
$(".toggle").click(function(){
$(".dev1").toggle(500);
});
//Fading:
$(".fadeIn").click(function(){
$(".dev1").fadeIn(1000);
});
$(".fadeOut").click(function(){
$(".dev1").fadeOut(1000);
});
$(".fadeToggle").click(function(){
$(".dev1").fadeToggle(500);
});
$(".fadeTo").click(function(){
$(".dev1").fadeTo(500,0.4);
});
//Slide:
$(".slideUp").click(function(){
$(".dev1").slideUp(1000);
});
$(".slideDown").click(function(){
$(".dev1").slideDown(1000);
});
$(".slideToggle").click(function(){
$(".dev1").slideToggle(500);
});
//Animate:
$(".animate").click(function(){
$(".dev1").animate({left:'250px'},500);
});
$(".animate-back").click(function(){
$(".dev1").animate({left:'0px',opacity:'0.5',
height:'200px',
width:'40%',
fontSize:'50px'},500);
});
$(".animate-modify").click(function(){
$(".dev1").animate({left:'+=10px',
width:'-=2%',
height:'toggle'},500);
});
$(".animate-lien-tuc").click(function(){
$(".dev1").animate({left:'10%'},500,function(){
$('.dev1').css('background','red');})
.animate({top:'100px'},500)
.animate({left:'0'},500)
.animate({top:'0'},500,
function(){$(this)
.css('background','green');});
});
});
</script>
<section>
<input type="button" value="Hide" class="hide">
<input type="button" value="Show" id="show">
<input type="button" value="Toggle" class="toggle"> |
<input type="button" value="fadeIn" class="fadeIn">
<input type="button" value="fadeOut" class="fadeOut">
<input type="button" value="fadeToggle" class="fadeToggle">
<input type="button" value="fadeTo" class="fadeTo"> |
<input type="button" value="slideUp" class="slideUp">
<input type="button" value="slideDown" class="slideDown">
<input type="button" value="slideToggle" class="slideToggle"> |
<input type="button" value="Animate" class="animate">
<input type="button" value="Animate-Back" class="animate-back">
<input type="button" value="Animate-Modify" class="animate-modify">
<input type="button" value="Animate-Liên tục" class="animate-lien-tuc">
</section>
<hr>
<section class="dev1">Developer</section>
</body>
</html>