fadeinThe jQuery fadeIn method can take multiple arguments. You can set the duration, easing and also provide a completion callback, which allows you to execute tasks which rely on the completion of your fade-in animation.

There is somewhat of a fuzzy line between the jQuery show, fade-in and animate methods. At the end of the day, they all leverage jQuery animation. With the fadeIn method, if you pass no arguments, then the matched elements are faded-in with a duration of 800ms (0.8 seconds). But if you want to gradually fade-in the elements, then you can specify a custom duration, the easing and a callback for when the fadeIn method completes.

Try it yourself ! – Example # 1

In above example, click the button labeled: “Fade the paragraph in”. You will notice that the paragraph fades in slowly. Now click the HTML tab. The paragraph element has its style attribute set to: “display: none;”. This is the reason that that the paragraph is not visible when the page loads. Now click the JavaScript tab. There is a click event handler for the element: button#fadeIn. When that button is clicked, the jQuery fadeIn method is called on every paragraph element in the page (in this case, there is just one).

PARAGRAPH – A

Try it yourself ! – Example # 2

Notice how there are three arguments passed to the jQuery fadeIn method . The first argument is the duration property, which is set to: 2000. This means that the fading-in of the paragraph should last 2000 milliseconds, or two seconds. The second argument: “swing”, is for the easing. It makes the animation a bit more lifelike. The third argument is a function. This callback function will be executed when the fade-in completes. Inside of that function, we change the text of the paragraph to “Fade-in complete!”. Also, we add the class “done”. If  you click the HTML tab again, you’ll see an embedded stylesheet (the style element). There we define the .done class which states that any element with that class has a green background and white text. When  you run the example code, you’ll notice that after the animation completes, the paragraph changes to green background with white text.

Leave a Reply

Your email address will not be published. Required fields are marked *