Effects with jQuery

Magento

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");
});