Anyone who already knows what jQuery is , knows that this JavaScript library allows us to perform complex effects in a fast, easy and best way, with little code.
In this article I’ll show you how to make opacity effects, reveal and hide elements using the fantastic jQuery library .
To trigger the action we use a button.
Check out all the effects on the jQuery Effects Samples page .
Basic Effects:
Show
Displays the jQuery selector target element that has been hidden.
$("button").click(function () { $("p").show("slow");}); |
As a parameter we can pass slow, normaland fastfor slow, normal and fast speed respectively. We can enter a number in milliseconds
Hide
Hides the jQuery selector target element.
$("button").click(function () { $("p").hide("fast");}); |
Sliding effects:
SlideDown
Reveals content smoothly from top to bottom
$("button").click(function () { $("p").slideDown(1000);}); |
SlideUp
Hides content gently from the bottom up
$("button").click(function () { $("p").slideUp("fast");}); |
Opacity effects:
Fade In
Reveals the hidden element starting from 0% (hidden) to 100% (visible)
$("button").click(function () { $("p").fadeIn("fast");}); |
FadeOut
Hides element starting at 100% (visible) to 0% (hidden)
$("button").click(function () { $("p").fadeOut("fast");}); |
