Code for Hiding an element and Showing an element on button click (using id selectors)
<!--hiding and showing an element using JQuery-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.4.js"></script>
<title>Document</title>
</head>
<body>
<h1>Satish is teaching JQuery</h1>
<button id="hide">Hide the Text</button>
<button id="show">Show the Text</button>
</body>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("h1").hide();
});
});
$(document).ready(function(){
$("#show").click(function(){
$("h1").show();
});
});
</script>
</html>
Output
Code for Hiding an element and Showing an element on button click (using class selectors)
<!--hiding and showing an element using class selectors and element selectors-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.4.js"></script>
<title>Document</title>
</head>
<body>
<h1>Satish is teaching JQuery</h1>
<button class="hide">Hide the Text</button>
<button class="show">Show the Text</button>
</body>
<script>
$(document).ready(function(){
$(".hide").click(function(){
$("h1").hide(); //element selectors
});
});
$(document).ready(function(){
$(".show").click(function(){
$("h1").show();
});
});
</script>
</html>
Output
Code for using the Hide function with the slow parameter
<!--Code for using the Hide function with the slow parameter-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.4.js"></script>
<title>Document</title>
</head>
<body>
<h1>Satish is teaching JQuery</h1>
<button class="hide">Hide the Text</button>
<button class="show">Show the Text</button>
</body>
<script>
$(document).ready(function(){
$(".hide").click(function(){
$("h1").hide("fast"); //element selectors
});
});
$(document).ready(function(){
$(".show").click(function(){
$("h1").show("slow");
});
});
</script>
</html>
Output
Code for using the Hide function with the milliseconds parameter
<!--parameters for hide - milliseconds-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.4.js"></script>
<title>Document</title>
</head>
<body>
<h1>Satish is teaching JQuery</h1>
<button class="hide">Hide the Text</button>
<button class="show">Show the Text</button>
</body>
<script>
$(document).ready(function(){
$(".hide").click(function(){
$("h1").hide(15000); //milliseconds
});
});
$(document).ready(function(){
$(".show").click(function(){
$("h1").show("slow");
});
});
</script>
</html>
JQuery Fade Methods
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
Output
Code for demonstrating the use of fadeIn and fadeOut methods in JQuery
<!--parameters for fadeIn and FadeOut - slow,fast or milliseconds-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.4.js"></script>
<title>Document</title>
</head>
<body>
<img src="graph.jpg" height="200px" width="200px"> <br>
<button class="hide">Show the Image</button>
<button class="show">Hide the Image</button>
</body>
<script>
$(document).ready(function(){
$(".hide").click(function(){
$("img").fadeIn("slow");
});
});
$(document).ready(function(){
$(".show").click(function(){
$("img").fadeOut("slow");
});
});
</script>
</html>
Output
Code for demonstrating the use of fadeToggle method in JQuery
<!--parameters for fadeToggle- slow,fast or milliseconds-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.4.js"></script>
<title>Document</title>
</head>
<body>
<img src="graph.jpg" height="200px" width="200px"> <br>
<button class="hide">Click Here</button>
</body>
<script>
$(document).ready(function(){
$(".hide").click(function(){
$("img").fadeToggle("slow");
});
});
</script>
</html>
Output
Code for demonstrating the use of animate method in JQuery
<!-- animate using jquery move the image left 250 px and increase size-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.4.js"></script>
<title>Document</title>
<style>
img{
position: relative;
top:1px;
left:1px;
}
</style>
</head>
<body>
<img src="graph.jpg" height="200px" width="200px"> <br>
<button class="hide">Click Here</button>
</body>
<script>
$(document).ready(function(){
$(".hide").click(function(){
$("img").animate({left:'250px',height:'300px',width:'300px'});
});
});
</script>
</html>
Output
Code for demonstrating the use of mouseenter and mouseleave event in JQuery
<!-- events mouseenter and mouseleave-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.4.js"></script>
<title>Document</title>
<style>
div{
width:200px;
height:200px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="t">This is a division</div>
</body>
<script>
$(document).ready(function(){
$("#t").mouseenter(function(){
alert("You have entered the div region");
});
$("#t").mouseleave(function(){
alert("You have left the div region");
});
});
</script>
</html>
slide in jquery
slidedown
slideup
slideToggle()
Output
Code for demonstrating the use of slideDown method in JQuery
<!-- slidedown-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.4.js"></script>
<title>Document</title>
<style>
#first{
width:200px;
height:200px;
background-color: aqua;
}
#second
{
width:200px;
height:200px;
background-color:brown;
display:none;
}
</style>
</head>
<body>
<div id="first">This is a division</div>
<div id="second">This is a division</div>
</body>
<script>
$(document).ready(function(){
$("#first").click(function(){
$("#second").slideDown();
});
});
</script>
</html>
Output
Code for demonstrating the use of slideUp method in JQuery
<!-- slidedown-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.4.js"></script>
<title>Document</title>
<style>
#first{
width:200px;
height:200px;
background-color: aqua;
}
#second
{
width:200px;
height:200px;
background-color:brown;
}
</style>
</head>
<body>
<div id="first">This is a division</div>
<div id="second">This is a division</div>
</body>
<script>
$(document).ready(function(){
$("#second").click(function(){
$("#second").slideUp("slow");
});
});
</script>
</html>
Output
Code for demonstrating the use of slideToggle method in JQuery
<!-- slidetoggle()-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.4.js"></script>
<title>Document</title>
<style>
#first{
width:200px;
height:200px;
background-color: aqua;
}
#second
{
width:200px;
height:200px;
background-color:brown;
}
</style>
</head>
<body>
<div id="first">This is a division</div>
<div id="second">This is a division</div>
</body>
<script>
$(document).ready(function(){
$("#first").click(function(){
$("#second").slideToggle("slow");
});
});
</script>
</html>
Output
Code for demonstrating the use of stop method in JQuery
<!-- stop-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.4.js"></script>
<title>Document</title>
<style>
#first{
width:200px;
height:200px;
background-color: aqua;
}
#second
{
width:200px;
height:200px;
background-color:brown;
}
</style>
</head>
<body>
<div id="first">This is a division</div>
<div id="second">This is a division</div>
<button id="stop">STOP</button>
</body>
<script>
$(document).ready(function(){
$("#first").click(function(){
$("#second").slideToggle(50000);
});
$("#stop").click(function(){
$("#second").stop();
});
});
</script>
</html>
Output
Code for demonstrating the use of callback function in JQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.4.js"></script>
<title>Document</title>
</head>
<body>
<img src="graph.jpg" height="200px" width="200px"> <br>
<button class="hide">Hide the Image</button>
</body>
<script>
$(document).ready(function(){
$(".hide").click(function(){
$("img").fadeOut("slow",function(){
alert("Why did you hide this image?");
});
});
});
</script>
</html>
Output
Code for adding CSS effect to an element in JQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.4.js"></script>
<title>Document</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora incidunt rerum libero eligendi ullam at, tempore fugit nihil! Nemo sint ex voluptates minus, quisquam adipisci alias corrupti optio reprehenderit dignissimos!</p>
<button class="hide">Apply CSS</button>
</body>
<script>
$(document).ready(function(){
$(".hide").click(function(){
$("p").css({"color":"red","font-weight":"bold"});
});
});
</script>
</html>
Output
Code for demonstrating JQuery Chaining
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.4.js"></script>
<title>Document</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora incidunt rerum libero eligendi ullam at, tempore fugit nihil! Nemo sint ex voluptates minus, quisquam adipisci alias corrupti optio reprehenderit dignissimos!</p>
<button class="hide">Apply CSS</button>
</body>
<script>
$(document).ready(function(){
$(".hide").click(function(){
$("p").css({"color":"red","font-weight":"bold"}).fadeOut("slow");
});
});
</script>
</html>
Output