JQuery Interview Questions Part - 4
Q 1. What are Effects?
Ans 1. Effects
are the visible changes in the appearance of the selected HTML elements that
get triggered by some user action.
For example –
• Hiding an element on the
click of a mouse
$(“button”).click(function()
{
$(“p”).hide();
});
• Change in the dimensions
of an HTML element when you hover over an element
$(“button”).click(function()
{
$(“p”).animate({height:’250px’,
width:’250px’}, slow);
});
Q 2.
How is hide effect
method useful?
Ans 2. “Hide” effect
is used to hide a visible HTML element. It takes two parameters – speed(optional)
and callback(optional).
Syntax –
•
$(selector).hide(speed, callback)
Example –
$(“button”).click(function()
{
$(“p”).hide();
});
Q 3.
How is show effect
method useful?
Ans 3. “Show” effect
is used to show a hidden HTML element. It takes two parameters – speed(optional)
and callback(optional).
Syntax –
•
$(selector).show(speed, callback)
Example –
$(“button”).click(function()
{
$(“p”).show();
});
Q 4.
How is toggle effect
method useful?
Ans 4. “toggle”
effect is used to toggle between hide and show effects. It takes two parameters –
speed(optional) and callback(optional).
Syntax –
•
$(selector).toggle(speed, callback)
Example –
$(“button”).click(function()
{
$(“p”).toggle();
});
Q 5.
How is fadeIn effect
method useful?
Ans 5. “fadeIn”
effect is used to fade in a hidden HTML element. It takes two parameters – speed(optional)
and callback(optional).
Syntax –
•
$(selector).fadeIn(speed, callback)
Example –
$(“button”).click(function()
{
$(“p”).fadeIn();
});
Q 6.
How is fadeOut effect
method useful?
Ans 6. “fadeOut”
effect is used to fade out a visible HTML element. It takes two parameters – speed(optional)
and callback(optional).
Syntax –
•
$(selector).fadeOut(speed, callback)
Example –
$(“button”).click(function()
{
$(“p”).fadeOut();
});
Q 7.
How is fadeTo effect
method useful?
Ans 7. “fadeTo”
effect is used to fade an HTML element to a given opacity. The opacity value
ranges from 0 to 1. It takes three parameters – speed, opacity and callback.
Syntax –
•
$(selector).fadeTo(speed, opacity, callback)
Example –
$(“button”).click(function()
{
$(“p”).fadeTo(“slow”, 0.3);
});
Q 8.
How is fadeToggle
effect method useful?
Ans 8. “fadeToggle”
effect toggles between fadeIn and fadeOut effects. It takes two parameters – speed(optional)
and callback(optional).
Syntax –
•
$(selector).fadeToggle(speed, callback)
Example –
$(“button”).click(function()
{
$(“p”).fadeToggle();
});
Q 9.
How is slideUp effect
method useful?
Ans 9. “slideUp”
effect is used to slideUp an HTML element. It takes two parameters – speed(optional)
and callback(optional).
Syntax –
•
$(selector).slideUp(speed, callback)
Example –
$(“button”).click(function()
{
$(“p”).slideUp();
});
Q 10.
How is slideDown
effect method useful?
Ans 10. “slideDown”
effect is used to slide down an HTML element. It takes two parameters – speed(optional)
and callback(optional).
Syntax –
•
$(selector).slideDown(speed, callback)
Example –
$(“button”).click(function()
{
$(“p”).slideDown();
});
Q 11.
How is slideToggle
effect method useful?
Ans 11. “slideToggle”
effect is used to toggle between slide up and slide down effects on an HTML
element. It takes two parameters –
speed(optional) and callback(optional).
Syntax –
•
$(selector).slideToggle(speed, callback)
Example –
$(“button”).click(function()
{
$(“p”).slideToggle();
});
Q 12.
How is stop effect
method useful?
Ans 12. The JQuery
stop effect is used to stop an animation or effect before it is finished. The
optional stopAll parameter specifies whether also the animation queue should be
cleared or not. The optional goToEnd parameter specifies whether or not to
complete the current animation immediately.
Syntax –
•
$(selector).stop(stopAll, gotoEnd)
Example –
$(“button”).click(function()
{
$(“p”).stop();
});
Q 13.
How is animate effect
method useful?
Ans 13. The JQuery
animate effect is used to create custom animations. The “{parameters}”
parameter defines the CSS properties to be animated.Other two parameters are - speed and
callback
Syntax –
•
$(selector).animate({parameters}, speed, callback)
Example –
$(“button”).click(function()
{
$(“p”).animate({height:’250px’,
width:’250px’}, slow);
});
Q 14.
How is callback
function useful?
Ans 14. A callback
function is executed only after the current effect is finished.
Suppose,
I hide an HTML element using hide effect and in its callback I show an alert
stating “Element has been hidden”.
This
alert will only be shown after the element is successfully hidden.
Example –
$(“button”).click(function()
{
$(“p”).hide(“slow”,
function(){
alert(“Element
has been hidden”);
});
});
Q 15.
What is chaining?
Ans 15. You can chain
together multiple JQuery effects within a single statement. Thus, all the
effects will execute in sequence.
Example –
$(“button”).click(function()
{
$(“p”).slideUp().slideDown().css(“background-color”, “yellow”);
});
