Jquery has a rich set of libraries to implement the functionality.
1 show():- it is used to show content which will be hidden
2 hide():- It is used to hide content which will be shown
3 toggle():- it will work hide and show both functionalities.
Example of the show, hide and toggle
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("p").show(2000);
});
$("#btn2").click(function(){
$("p").hide(2000);
});
$("#btn3").click(function(){
$("p").toggle(2000);
});
});
</script>
</head>
<body>
<p>damhfghjag fyadg fhdahyfghjad hadg fhdag fhad hgdgfhdf hdfgd</p>
<p>ashgf hjsag dfhadgshfg adfg adghjadg fhjd gfh gdajhfgdahfg d fda</p>
<button id="btn1">SHOW</button>
<button id="btn2">HIDE</button>
<button id="btn3">Toggle</button>
</body>
</html>
slideup() :- it is used to move content in up dimension .
slidedown():- it is used to move content in down dimension .
slidetoggle() :- it is used to move content in up and down dimension .
Example of slideup,slidedown and slidetoggle() in jquery ?
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("img").slideUp(2000);
});
$("#btn2").click(function(){
$("img").slideDown(2000);
});
$("#btn3").click(function(){
$("img").slideToggle(2000);
});
});
</script>
</head>
<body>
<img src="img6.jpg" />
<br>
<button id="btn1">SLIDE UP</button>
<button id="btn2">DOWN</button>
<button id="btn3">Toggle</button>
</body>
</html>
FadeIn(),FadeOut() and FadeTo():-
It is used to increase or decrease intensity of images,video or site content?
FadeIn():- It is used to Increase Intensity of Image
FadeOut():- It is used to Decrease Intensity of Images
FadeTo() :- It is used to change Intensity for constant value.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("img").fadeIn(7000);
});
$("#btn2").click(function(){
$("img").fadeOut(7000);
});
$("#btn3").click(function(){
$("img").fadeToggle(1000);
});
$("#btn4").click(function(){
$("img").fadeTo(3000,1);
});
});
</script>
</head>
<body>
<img src="img6.jpg" />
<br>
<button id="btn1">Fade In</button>
<button id="btn2">Fade Out</button>
<button id="btn3">Fade Toggle</button>
<button id="btn4">Fade To</button>
</body>
</html>
..........................................................................................................................................
on():- It is used to handle multiple events in Jquery.
("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
Complete Program of on()
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
});
</script>
</head>
<body>
<p>Click or move the mouse pointer over this paragraph.</p>
</body>
</html>
Another Example of on method:-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
});
</script>
</head>
<body>
<button>Click</button>
</body>
</html>
1 show():- it is used to show content which will be hidden
2 hide():- It is used to hide content which will be shown
3 toggle():- it will work hide and show both functionalities.
Example of the show, hide and toggle
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("p").show(2000);
});
$("#btn2").click(function(){
$("p").hide(2000);
});
$("#btn3").click(function(){
$("p").toggle(2000);
});
});
</script>
</head>
<body>
<p>damhfghjag fyadg fhdahyfghjad hadg fhdag fhad hgdgfhdf hdfgd</p>
<p>ashgf hjsag dfhadgshfg adfg adghjadg fhjd gfh gdajhfgdahfg d fda</p>
<button id="btn1">SHOW</button>
<button id="btn2">HIDE</button>
<button id="btn3">Toggle</button>
</body>
</html>
slideup() :- it is used to move content in up dimension .
slidedown():- it is used to move content in down dimension .
slidetoggle() :- it is used to move content in up and down dimension .
Example of slideup,slidedown and slidetoggle() in jquery ?
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("img").slideUp(2000);
});
$("#btn2").click(function(){
$("img").slideDown(2000);
});
$("#btn3").click(function(){
$("img").slideToggle(2000);
});
});
</script>
</head>
<body>
<img src="img6.jpg" />
<br>
<button id="btn1">SLIDE UP</button>
<button id="btn2">DOWN</button>
<button id="btn3">Toggle</button>
</body>
</html>
FadeIn(),FadeOut() and FadeTo():-
It is used to increase or decrease intensity of images,video or site content?
FadeIn():- It is used to Increase Intensity of Image
FadeOut():- It is used to Decrease Intensity of Images
FadeTo() :- It is used to change Intensity for constant value.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("img").fadeIn(7000);
});
$("#btn2").click(function(){
$("img").fadeOut(7000);
});
$("#btn3").click(function(){
$("img").fadeToggle(1000);
});
$("#btn4").click(function(){
$("img").fadeTo(3000,1);
});
});
</script>
</head>
<body>
<img src="img6.jpg" />
<br>
<button id="btn1">Fade In</button>
<button id="btn2">Fade Out</button>
<button id="btn3">Fade Toggle</button>
<button id="btn4">Fade To</button>
</body>
</html>
..........................................................................................................................................
on():- It is used to handle multiple events in Jquery.
("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
Complete Program of on()
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
});
</script>
</head>
<body>
<p>Click or move the mouse pointer over this paragraph.</p>
</body>
</html>
Another Example of on method:-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
});
</script>
</head>
<body>
<button>Click</button>
</body>
</html>
POST Answer of Questions and ASK to Doubt