With jQuery, you can hide and show HTML elements with the hide() and show() methods:
jQuery has the following fade methods::
$("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); $("button").click(function(){ $("p").hide(1000); }); $("button").click(function(){ $("p").toggle(); });
With jQuery you can fade an element in and out of visibility
jQuery has the following fade methods::
$("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); }); $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); $("button").click(function(){ $("#div1").fadeTo("slow", 0.15); $("#div2").fadeTo("slow", 0.4); $("#div3").fadeTo("slow", 0.7); });
With jQuery, you can create custom animations
jQuery has the following fade methods::
$("button").click(function(){ $("div").animate({left: '250px'}); }); $("button").click(function(){ $("div").animate({ left: '250px', opacity: '0.5', height: '150px', width: '150px' }); }); $("button").click(function(){ $("div").animate({ height: 'toggle' }); });
The jQuery stop() method is used to stop animations or effects before it is finished.
jQuery has the following slide methods:
$("#stop").click(function(){ $("#panel").stop(); });
With jQuery you can create a sliding effect on elements.
jQuery has the following slide methods:
$("#flip").click(function(){ $("#panel").slideDown(); }); $("#flip").click(function(){ $("#panel").slideUp(); }); $("#flip").click(function(){ $("#panel").slideToggle(); });
JavaScript statements are executed line by line. However, with effects, the next line of code can be run even though the effect is not finished. This can create errors. To prevent this, you can create a callback function..
A callback function is executed after the current effect is finished.
$("button").click(function(){ $("p").hide("slow", function(){ alert("The paragraph is now hidden"); }); }); $("button").click(function(){ $("p").hide(1000); alert("The paragraph is now hidden"); });
With jQuery, you can chain together actions/methods.
A callback function is executed after the current effect is finished.
Chaining allows us to run multiple jQuery methods (on the same element) within a single statement.
$("#p1").css("color", "red").slideUp(2000).slideDown(2000); $("#p1").css("color", "red") .slideUp(2000) .slideDown(2000);
Total : 27273
Today :9
Today Visit Country :