The inline-block property is not yet well-supported cross-browser. Use display:block, float:left, you'll get the same results (and spot some flaws in your layout too).
In case someone is reading this: I suppose all animations in jQuery give the elements a display:block property? Is inline-block support coming in 1.3? - ricardo On Oct 23, 9:18 pm, bulgarian388 <[EMAIL PROTECTED]> wrote: > Hi guys, I'm new to jQuery and I need some help. I have a UL with LIs. > In each LI there is a DIV with a bunch of content. The LIs are set to > display inline. > > Anyway, when I run the animate function, the LIs get shifted into > their default display (a list) and when the animation completes, the > LIs return to their inline display. It's driving me crazy trying to > figure it out, and I could definitely use some help. Here is the > entire code: > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> > <html xmlns="http://www.w3.org/1999/xhtml";> > <head> > <script type="text/javascript" src="jQuery.js"></script> > <script type="text/javascript"> > var container; > var lis; > var axes = []; > > $(function () { > container = $('#Container'); > lis = $('li', container); > axes = getAxes(); > > }); > > var getAxes = function (container) { > var axes = []; > > for (var i = 0; i < 600; (i = i + 100)) { > var axis = { > width: 100, > left: i, > right: (500 - i) > }; > > axes.push(axis); > }; > > return (axes); > > }; > > var Animate = function () { > var h = document.getElementById('height'); > var w = document.getElementById('width'); > > for (var i = 0; i < lis.length; i++) { > $(lis[i]).animate({ > height: h.value + 'px', > width: w.value + 'px' > }, 1000); > };}; > > </script> > <style type="text/css"> > * { > margin: 0; > outline: none; > padding: 0; > text-decoration: none; > > } > > body { > margin: 64px; > margin-left: auto; > margin-right: auto; > width: 600px; > > } > > #Container { > border: 3px solid #0000FF; > height: 180px; > overflow: hidden; > position: relative; > > } > > #Container ul { > overflow: hidden; > margin: 6px; > position: absolute; > white-space: nowrap; > > } > > #Container ul li { > border: 3px solid #FF0000; > display: inline-block; > height: 160px; > vertical-align: top; > width: 146px; > > } > > #Container ul li div { > overflow: hidden; > padding: 6px; > > } > > #Control { > list-style: none; > padding: 32px;} > > </style> > </head> > > <body> > <div id="Container"> > <ul> > <li > ><div > ><h1>Package 1</h1 > ><hr / > ><dl > ><dd>Website A</dd > ></dl > ><a href="#">Continue</a > ></div > ></li > ><li > ><div > ><h1>Package 2</h1 > ><hr / > ><dl > ><dd>Website A</dd > ><dd>Website B</dd > ></dl > ><a href="#">Continue</a > ></div > ></li > ><li > ><div > ><h1>Package 3</h1 > ><hr / > ><dl > ><dd>Website B</dd > ><dd>Website C</dd > ></dl > ><a href="#">Continue</a > ></div > ></li > ><li > ><div > ><h1>Package 4</h1 > ><hr / > ><dl > ><dd>Website A</dd > ><dd>Website C</dd > ></dl > ><a href="#">Continue</a > ></div > ></li > ><li > ><div > ><h1>Package 5</h1 > ><hr / > ><dl > ><dd>Website A</dd > ><dd>Website B</dd > ><dd>Website C</dd > ></dl > ><a href="#">Continue</a > ></div > ></li> > </ul> > </div> > <ul id="Control"> > <li> > <input type="text" id="height" /> > <input type="text" id="width" /> > <input type="button" onclick="Animate();" value="Go" /> > </li> > </ul> > </body> > </html>
