Sunday 19 July 2015

jQuery Effects

1. jQuery hide() ans show()


Syntax-

$("#hide").click(function(){
    $("p").hide();
});

$("#show").click(function(){
    $("p").show();
});

Hide() function with speed parameter:

$("button").click(function(){
    $("p").hide(1000);
});

2. jQuery toggle()

you can toggle between the hide() and show() methods with the toggle() method.

$("button").click(function(){
    $("p").toggle();
});

3. jQuery Fade Method

With jQuery you can fade an element in and out of visibility.
jQuery has the following fade methods:
  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()
$("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
});

fadeOut() and fadeToggle() are same as above.

->fadeTo()-

$(selector).fadeTo(speed,opacity,callback);

The required speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1).
The optional callback parameter is a function to be executed after the function completes.
$("button").click(function(){
    $("#div1").fadeTo("slow", 0.15);
    $("#div2").fadeTo("slow", 0.4);
    $("#div3").fadeTo("slow", 0.7);
});

4. jQuery slide Method



<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>

jQuery has the following slide methods:
a ) slideDown()
   $("#flip").click(function(){
     $("#panel").slideDown();  });
b) slideUp()
$("#flip").click(function(){
    $("#panel").slideUp();
});
c) slideToggle()
$("#flip").click(function(){
    $("#panel").slideToggle();
});


No comments:

Post a Comment