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>
