jqueryshowThe jQuery show method can take an object as an argument. In that argument, you define one or more properties that give jQuery more detail on how you want the matched elements to become shown

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 show method, if you pass no arguments, then the matched elements are immediately shown. But if you want to gradually show the elements, then you can provide an object that gives configuration details.

Try it yourself !

In above example, click the button labeled: “Show the paragraph”. 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#show. When that button is clicked, the jQuery show method is called on every paragraph element in the page (in this case, there is just one).

Notice how there is an object passed to the jQuery show method. That object provides details on how we want the paragraph element to be shown. The duration property is set to: 2000. This means that the showing of the paragraph should last 2000 milliseconds, or two seconds. The complete property is a function. This callback function will be executed when the animation is complete. Inside of that function, we change the text of the button to “Animation 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 button changes to green background with white text.

Leave a Reply

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