jQuery Interview Questions with answers and demo - Animation




Q :- How to hide elements in jQuery ?
Ans : We can use hide() method to hide elements in jQuery. 

Demo 

Q :- What show method does in jQuery ?
Ans : show() method makes the elements visible from hidden state with an animation effect.

Demo


Q :- What parameters can we pass to show or hide method in jQuery ?

Ans : Both the method accepts duration in milliseconds. 
       eg: $("div").hide(600);
       We can also pass the string value i.e. slow or fast.
       slow and fast string indicates 600 and 200 milliseconds respectively.  

Q :- What is the use of animate method in jQuery ?

Ans : animate() method performs a custom animation of a set of CSS properties.
      The animate() method allows us to create animation effects on any numeric CSS property.
      eg : $("#targetDiv").animate({
                opacity: 0.4,
                marginLeft: "0.6in",
                fontSize: "3em",
                borderWidth: "10px"

            }, 1500);

Demo


Q :- How to achieve sliding effects in jQuery ?

Ans :jQuery has method to provide sliding effect. slideUp(), slideDown() and slideToggle().

Q :- How slideUp() method works in jQuery ?

Ans : SlideUp() method animates the height but causes the lower parts of page to move up.
      This method also accepts duration parameter. We can supply either the string parameters slow or fast or we can specify the duration in miliseconds
       
      eg : $(this).find("ul").slideUp("slow");

Demo


Q :- How slideDown() method works in jQuery ?

Ans : SlideDown() method also animates the height but causes the lower parts of page to move down.
      This method also accepts duration parameter. We can supply either the string parameters slow or fast or we can specify the duration in miliseconds
       
      eg : $(this).find("ul").slideDown("slow");

Demo


Q :-  What is defference between hide() method and display:none css property ?

Ans : Both methods performs the same task, but hide() method adds animation effect while hidding the elements.

2 comments:

  1. good enough...(h)

    ReplyDelete
  2. very nice but a quite basic post [-( , was expecting some higher level questions 8-) plz provide some more question. thanks in advance cheer

    ReplyDelete