Simultaneously Sliding and Fading Elements - J Query

When some part of the web page is hidden and is shown to the user only on a specific action, sometimes a simple show/hide isn’t enough. We want to create more pleasing effects for our visitors.
Depending on the layout of the page, an instant show/hide effect may not make it entirely clear to the visitor what content was revealed. This is another advantage of sliding an element into view because it gives a visual cue to the visitor where the page layout is changing.
We could use jQuery’s built-in show method with a duration because this almost does the job, but not quite because it also animates the width of the element, as shown earlier in Figure (Passing a speed in to the show method animates height, width, padding, margin, and opacity). As you also noted earlier, the show method will animate any padding and margin around the element, so to solve the problem we will use the animate function to create a custom effect.

Solution

Use the animation function to toggle both the height and the opacity at the same time:

Discussion

Using the animate method allows us to specify exactly which CSS properties we want to animate for the effect.
We are also using toggle as the end point value. This way, the animate method takes the current height in the initial state and toggles it to either zero or 100 percent of the initial state.
In our example, the initial state of the box is visible. If we want it to slide and fade into view, then we only need to set the display property to none in the stylesheet.
Warning: there is no need to set the height to zero in the style; in fact, doing so will mean the animate won’t expand to the correct height because it will toggle back and forth between zero height (from the CSS) and zero height and display none (the final point of slideUp).


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics