zAccordion — Fade in the Accordion

One of the drawbacks when it comes to JavaScript slideshows and other post-render solutions is the split second just before the plugin build is complete. Depending on the page's CSS, images may be stacked one after another, or even render on top of each other.

In the example below, a function is called that will fade in the accordion once it is ready.

Back to the Examples

Implementation

I've included two wrapper divs. The first div (outer) will be set roughly to the height of the final accordion. It will serve as a placeholder. The second div (inner) will initially be hidden from view.

							<div id="outer">
								<div id="inner">
									<ul id="slides">
										<li>
											<img src="bottles.jpg" width="600" height="400" alt="" />
										</li>
										<li>
											<img src="barrels.jpg" width="600" height="400" alt="" />
										</li>
										<li>
											<img src="rack.jpg" width="600" height="400" alt="" />
										</li>
										<li>
											<img src="cellar.jpg" width="600" height="400" alt="" />
										</li>
									</ul>
								</div>
							</div>
						

Styling the wrapper divs is easy.

							#outer {height:430px;}
							#inner {display:none;position:relative;}
						

The afterBuild option is set to a function that will fade in the inner div once the accordion is ready.

							$(document).ready(function() {
								$("#slides").zAccordion({
									width: 884,
									slideWidth: 600,
									height: 400,
									afterBuild: function () {
										$("#inner").fadeIn(3000);
									}
								});
							});
						

Back to the Examples