jQUERY EFFECTS
jQuery Effects
Date: 07/03/2020
Jquery has some of the in-built methods, that methods are used to add the effects for the Html element.
jQuery | hide()
hide() is an inbuilt method in jquery, which is used to hide the selected element.
syntax:
$(selector).hide(duration, easing, call_function);
$(selector).hide(duration, easing, call_function);
$(selector).hide(duration, easing, call_function);
Example:
<!DOCTYPE html>
<html>
<head>
<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js</a>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(500);
});
});
</script>
</head>
<body>
<center>
<button>ok</button>
<p>jquery effects and method test</p>
</center>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js</a>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(500);
});
});
</script>
</head>
<body>
<center>
<button>ok</button>
<p>jquery effects and method test</p>
</center>
</body>
</html>
<!DOCTYPE html> <html> <head> https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(500); }); }); </script> </head> <body> <center> <button>ok</button> <p>jquery effects and method test</p> </center> </body> </html>
Before clicking the button:
After clicking the button:
jQuery | toggle()
toggle() method is used to toggle between hide() and show
Generic Highlighting
$(selector).toggle(speed, easing, callback)
Generic Highlighting
$(selector).toggle(speed, easing, callback)
Generic Highlighting $(selector).toggle(speed, easing, callback)
<!DOCTYPE html>
<html>
<head>
<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js</a>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle(500);
});
});
</script>
</head>
<body>
<center>
<button>toggle</button>
<p>jquery effects and method test</p>
</center>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js</a>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle(500);
});
});
</script>
</head>
<body>
<center>
<button>toggle</button>
<p>jquery effects and method test</p>
</center>
</body>
</html>
<!DOCTYPE html> <html> <head> https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(500); }); }); </script> </head> <body> <center> <button>toggle</button> <p>jquery effects and method test</p> </center> </body> </html>
Before clicking the button:
After clicking the button:
After clicking the button next time:
jQuery | fade
fadeIn() – used to fade in a invisible element.
fadeOut() – used to fade out a visible element
fadeTo() – used to change the opacity of the selected element.
fadeToogle() – used to toogle between fadeIn() and fadeOut().
fadeToggle():
syntax:
$(selector).fadeToggle(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeToggle(speed,callback);
Example:
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style>
#mydiv {
color: white;
margin-top: 50px;
padding-top: 50px;
height: 140px;
background: blue;
}
</style>
<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js</a>
</head>
<body>
<center>
<button id = "fade">Fade</button>
<div id= "mydiv">
<p>pheonixsolutions</p>
</div>
<script>
$(document).ready(function() {
$("#fade").click(function() {
$("#mydiv").fadeToggle();
});
});
</script>
</center>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style>
#mydiv {
color: white;
margin-top: 50px;
padding-top: 50px;
height: 140px;
background: blue;
}
</style>
<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js</a>
</head>
<body>
<center>
<button id = "fade">Fade</button>
<div id= "mydiv">
<p>pheonixsolutions</p>
</div>
<script>
$(document).ready(function() {
$("#fade").click(function() {
$("#mydiv").fadeToggle();
});
});
</script>
</center>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style>
#mydiv {
color: white;
margin-top: 50px;
padding-top: 50px;
height: 140px;
background: blue;
}
</style>
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
</head>
<body>
<center>
<button id = "fade">Fade</button>
<div id= "mydiv">
<p>pheonixsolutions</p>
</div>
<script>
$(document).ready(function() {
$("#fade").click(function() {
$("#mydiv").fadeToggle();
});
});
</script>
</center>
</body>
</html>
Before clicking the button:
After clicking the button:
Again clicking the button:
Conclusion:
Thanks for using pheonixsolutions.
If you like the blog share it with your friends.
