06.jQuery Effects
jQuery Effects
- hide(), show()
- Fading
- Sliding
- Animation
- Stop
- Callback
- Chaining
01.hide(), show()
$("p").hide();
$("p").show();
$("p").hide(1000);
Shown elements are hidden and hidden elements are shown
$("p").toggle();
Example
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
02.Fading
jQuery has the following fade methods:
1.fadeIn()
2.fadeOut()
3.fadeToggle()
4.fadeTo()
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
If the elements are faded out, fadeToggle() will fade them in.If the elements are
faded in, fadeToggle() will fade them out.
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1).
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
03.Sliding
The jQuery slide methods slide elements up and down.
jQuery has the following slide methods:
1.slideDown()
2.slideUp()
3.slideToggle()
$("#panel").slideDown();
$("#panel").slideUp();
$("#panel").slideToggle();
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
</style>
<body>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
04.Animation
With jQuery, you can create custom animations.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<br>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
05.Stop
The jQuery stop() method is used to stop animations or effects before it is finished.
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
06.Callback
A callback function is executed after the current effect is 100% finished.
$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});
The example below has no callback parameter, and the alert box will be displayed
before the hide effect is completed:
$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});
07.Chaining
Until now we have been writing jQuery statements one at a time (one after the other).
However, there is a technique called chaining, that allows us to run multiple jQuery
commands, one after the other, on the same element(s).
Tip: This way, browsers do not have to find the same element(s) more than once.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">jQuery is fun!!</p>
<button>Click me</button>
</body>
</html>
Comments
Post a Comment