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.
Use the animation function to toggle both the height and the opacity at the same time:
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).
J Query Related Interview Questions
|HTML 4 Interview Questions||HTML Interview Questions|
|HTML 5 Interview Questions||Zend Interview Questions|
|JqueryUI Interview Questions||Dynamic HTML Interview Questions|
|XQuery Interview Questions||jQuery Mobile Interview Questions|
J Query Related Practice Tests
|HTML 4 Practice Tests||HTML Practice Tests|
|HTML 5 Practice Tests||Zend Practice Tests|
|PHP and Jquery Practice Tests||J Query Practice Tests|
|CodeIgniter Practice Tests||Dynamic HTML Practice Tests|
J Query Tutorial
Selecting Elements With Jquery
Beyond The Basics
Faster, Simpler, More Fun
Html Form Enhancements From Scratch
Html Form Enhancements With Plugins
Interface Components From Scratch
User Interfaces With Jquery Ui
Jquery Ui Theming
Jquery, Ajax, Data Formats: Html, Xml, Json, Jsonp
Using Jquery In Large Projects
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.