Working Behavior of Animate and FadeIn Works in jQuery

Here we go, with the one of key function, Animate, that helps to provide effects on DOM elements.

The Animate function accepts the following parameters: animate (properties [, duration] [, easing] [, complete]).

In the contrived example shown here, I've demonstrated the Toggle, Animate and FadeIn() methods.

Let's describe the code segment being used here.

There is a button having the id CSharp and a few divs in the following code for a frame.

Figure 1.



Figure 2.



The code demonstrated in Figure 2 shows how jQuery effects functions work. The toggle() method is for the div having the class "Details". The toggle() method is generally used for hiding and showing the DOM element.

Animate() takes a few parameters; they are: animate (properties [, duration] [, easing] [, complete]).
Properties such as CSS properties are used. The duration specifies how long the animations run. "Complete" is the callback function that runs whenever the animation completes. The "Complete" function doesn't take any arguments whilst this is set as the DOM elements being used. The callback method executes once per matched element, not once for the animation as a whole.

P.S.: To run the animation as a whole, there is also an amazing function named Promise() present in jQuery 1.6. This method executes a single callback for the animation as a whole, when all matching elements have completed their animations. I'll try to explore this method more in a future article.
I have read wonderful things that I want to share with everyone, which is the following.

Note: Unlike shorthand animation methods such as .slideDown() and .fadeIn(), the .animate() method does not make hidden elements visible as part of the effect. For example, given$('someElement').hide().animate({height:'20px'}, 500), the animation will run, but the element will remain hidden.

fadeIn()

The fadeIn() method animates the opacity of the matching elements. The fadeIn() method takes a couple of parameters; they are: fadeIn( [duration ] [, complete ] ).

Duration is specified using milliseconds; higher values mean slow animation, low values mean fast animation. I've provided an example; see:



The output of the code segment includes toggle, Animate and FadeIn functions all together in a single solution.

Figure 3 shows the result of running the application the first time. A button along with a DIV having a description.

Figure 3.



After clicking on the CSharpAnimate button the message is displayed bordered with the red color and gets down a little bit. The same button click works to fadeIn one DIV shown with the background color Orange. This DIV was hidden earlier due to the "display: none" property.



A sample application has been attached for reference.