jQuery Effects

25 Sep

jQuery Effects

1.jQuery Simple  Hide/Show

<script src=”jquery.js”></script>
<script>
$(document).ready(function(){
$(“#hide”).click(function(){
$(“p”).hide();
});
$(“#show”).click(function(){
$(“p”).show();
});
});
</script>

 

Full Example:

<!DOCTYPE html>
<html>
<head>
<script src=”jquery.js”></script>
<script>
$(document).ready(function(){
$(“#close”).click(function(){
$(“p”).hide();
});
$(“#open”).click(function(){
$(“p”).show();
});
});
</script>
</head>
<body>
<p>HI WELCOME</p>
<button id=”close”>Hide</button>
<button id=”open”>Show</button>
</body>
</html>

 

2.jQuery Fade :

1. fadeIn()

The jQuery fadeIn() method is used to fade in a hidden element.

<script src=”jquery.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).fadeIn();
$(“#div2”).fadeIn(“slow”);
$(“#div3”).fadeIn(3000);
});
});
</script>

2.fadeOut()

The jQuery fadeOut() method is used to fade out a visible element.

<script src=”jquery.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).fadeOut();
$(“#div2”).fadeOut(“slow”);
$(“#div3”).fadeOut(3000);
});
});
</script>

3.fadeToggle()

The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods.

<script src=”jquery.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).fadeToggle();
$(“#div2”).fadeToggle(“slow”);
$(“#div3”).fadeToggle(3000);
});
});
</script>

4.fadeTo()

The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1).

<script src=”jquery.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).fadeTo(“slow”,0.15);
$(“#div2”).fadeTo(“slow”,0.4);
$(“#div3”).fadeTo(“slow”,0.7);
});
});
</script>

Full Example:

<!DOCTYPE html>
<html>
<head>
<script src=”jquery.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).fadeIn();
$(“#div2”).fadeIn(“slow”);
$(“#div3″).fadeIn(3000);
});
});
</script>
</head>

<body>
<p>fadeIn eg.</p>
<button>Click Here</button>
<br><br>
<div id=”div1″ style=”width:80px;height:80px;display:none;background-color:red;”></div><br>
<div id=”div2″ style=”width:80px;height:80px;display:none;background-color:green;”></div><br>
<div id=”div3″ style=”width:80px;height:80px;display:none;background-color:blue;”></div>

</body>
</html>

Referred by :

http://www.w3schools.com/jquery/

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: