JQuery provides an interface for creating amazing effects. For creating the visual effect we are using the following methods. They are,
1) hide():-This function hides the selected elements.
Syntax: –
$(selector).hide(speed,callback)
The parameter speed defines the speed of the hiding and takes the values as slow, fast, normal or milliseconds.
Eg: –
<!DOCTYPE html>
<html>
<head>
<script type=“text/javascript” src=“jquery.js”></script>
<script type=“text/javascript”>
$(document).ready(function()
{
$(“button”).click(function()
{
$(“p”).hide(1000);
} );
} );
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
2) show():-The show() helps to show the selected elements.
Syntax: –
$(selector).show(speed,callback)
The parameter speed defines the speed of the hiding and takes the values as slow, fast , normal or milliseconds.
Eg: –
<!DOCTYPE html>
<html>
<head>
<script type=“text/javascript” src=“jquery.js”></script>
<script type=“text/javascript”>
$(document).ready(function()
{
$(“#hide”).click(function()
{
$(“p”).hide();
} );
$(“#show”).click(function()
{
$(“p”).show();
} );
} );
</script>
</head>
<body>
<p>If you click on the “Hide” button, I will disappear.</p>
<button id=“show”>Show</button>
</body>
</html>
3) toggle():-toggle() used to toggle selected items. That is it works between hide() and show(). The shown elements are hidden and hidden elements are shown.
Syntax: –
$(selector).toggle(speed,callback)
Eg: –
<!DOCTYPE html>
<html>
<head>
<script type=“text/javascript” src=“jquery.js”></script>
<script type=“text/javascript”>
$(document).ready(function()
{
$(“button”).click(function()
{
$(“p”).toggle();
} );
} );
</script>
</head>
<body>
<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
4) JQuery slide method: – The jQuery slide method changes the height step by step for the selected elements. The jQuery slide methods are,
4.1) slideDown():- The slideDown() shows the selected elements.
Syntax: –
$(selector).slideDown(speed,callback)
Eg: –
<!DOCTYPE html>
<html>
<head>
<script type=“text/javascript” src=“jquery.js”></script>
<script type=“text/javascript”>
$(document).ready(function()
{
$(“.flip”).click(function()
{
$(“.panel”).slideDown(“slow”);
} );
} );
</script>
<style type=“text/css”>
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class=“panel”>
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
</div>
<p class=“flip”>Show Panel</p>
</body>
</html>
4.2) slideUp():- The slideUp() hides the selected items.
Syntax: –
$(selector).Up(speed,callback)
Eg: –
<!DOCTYPE html>
<html>
<head>
<script type=“text/javascript” src=“jquery.js”></script>
<script type=“text/javascript”>
$(document).ready(function()
{
$(“.flip”).click(function()
{
$(“.panel”).slideUp(“slow”);
} );
} );
</script>
<style type=“text/css”>
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
}
</style>
</head>
<body>
<div class=“panel”>
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
</div>
<p class=“flip”>Hide Panel</p>
</body>
</html>
4.3) slideToggle():- This function toggle slide-up and slide-down of selected elements.
READ JQuery Events
Syntax: –
$(selector).slideToggle(speed,callback)
Eg: –
<!DOCTYPE html>
<html>
<head>
<script type=“text/javascript” src=“jquery.js”></script>
<script type=“text/javascript”>
$(document).ready(function()
{
$(“.flip”).click(function()
{
$(“.panel”).slideToggle(“slow”);
} );
} );
</script>
<style type=“text/css”>
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class=“panel”>
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
</div>
<p class=“flip”>Show/Hide Panel</p>
</body>
</html>
5) JQuery fade method:-
The jQuery fade methods change the opacity for selected items. The fading methods are,
1) fadeIn():- This function fades in selected elements.
Syntax: –
$(selector).fadeIn(speed,callback)
Eg:-
<!DOCTYPE html>
<html>
<head>
<script type=“text/javascript” src=“jquery.js”></script>
<script type=“text/javascript”>
$(document).ready(function()
{
$(“.btn1”).click(function()
{
$(“p”).fadeOut()
} );
$(“.btn2”).click(function()
{
$(“p”).fadeIn();
} );
} );
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class=“btn1”>Fade out</button>
<button class=“btn2”>Fade in</button>
</body>
</html>
2) fadeout():-The fadeout() fade out the selected elements.
Syntax: –
$(selector).fadeOut(speed,callback)
Eg: –
<!DOCTYPE html>
<html>
<head>
<script type=“text/javascript” src=“jquery.js”></script>
<script type=“text/javascript”>
$(document).ready(function()
{
$(“div”).click(function()
{
$(this).fadeOut(4000);
});
});
</script>
</head>
<body>
<div style=“background:yellow;width:200px”>CLICK ME AWAY!</div>
<p>If you click on the box above, it will be removed.</p>
</body>
</html>
3) fadeTo():- This function fades out selected elements to a given opacity.
Syntax: –
$(selector).fadeTo(speed,opacity,callback)
Eg: –
<!DOCTYPE html>
<html>
<head>
<script type=“text/javascript” src=“jquery.js”></script>
<script type=“text/javascript”>
$(document).ready(function()
{
$(“button”).click(function()
{
$(“div”).fadeTo(“slow”,0.25);
} );
} );
</script>
</head>
<body>
<div style=“background:yellow;width:300px;height:300px”>
<button>Click to Fade</button>
</div>
</body>
</html>
6) animate():- The animate() run a custom animation on selected elements.
Synatx: –
$(selector).animate({params},[duration],[easing],[callback])
The first parameter “params” defines the CSS properties that will be animated and many properties can be animated at the same time. The second parameter is duration. It specifies the speed of the animation and the possible values are “fast”, “slow”, “normal”, or” milliseconds”.
Eg: –
<!DOCTYPE html>
<html>
<head>
<script type=“text/javascript” src=“jquery.js”></script>
<script type=“text/javascript”>
$(document).ready(function()
{
$(“button”).click(function()
{
$(“div”).animate({height:300},”slow”);
$(“div”).animate({width:300},”slow”);
$(“div”).animate({height:100},”slow”);
$(“div”).animate({width:100},”slow”);
} );
} );
</script>
</head>
<body>
<button>Start Animation</button>
<br /> <br />
<div style=“background:#98bf21;height:100px;width:100px;position:relative”>
</div>
</body>
</html>
7) Other JQuery effect methods
1) clearQueue():- It removes all queued functions for the selected element.
Syntax: –
(selector).animate({styles},speed,easing,callback)
The parameter “styles” defines one or more CSS properties to animate, and the values to animate to. The second parameter “speed” defines the speed of the animation. The third parameter “easing” defines an easing function that sets the speed in different points of the animation. Built in easing functions are swing and linear. The callback parameter is a function to be executed after the animation completes.
READ JQuery Attributes
2) delay():-It sets a delay for all queued functions for the selected element.
3) dequeue():-It runs the next queued functions for the selected element.
4) queue():-It shows the queued functions for the selected element.
5) stop():-It stops a running animation on selected elements.
Syntax: –
$(selector).stop(stopAll,goToEnd)
The parameter stopAll is a Boolean value specifying whether or not to stop the queued animations as well. Default is false and the parameter goToEnd is a Boolean value specifying whether or not to complete the current animation immediately. Default is false.
No comments:
Post a Comment