Hi, using jquery 1.3.2. I am going to dig through the docs more on the JQuery site, but while I do that. I am trying to animate a UL of items. I want the user to mouse over the header and have it expand. Sample page is below. Just have to change the path to jquery-1.3.2.js. It works, sort of in FF and IE. There are two problems that I haven't been able to resolve.
First and foremost. If you mouse over a bunch of selections quickly, they all start to expand. If you stop your mouse, they continue to slide up and down never ending. How can I get it to open one item at a time? Same thing happens in IE7 and Chrome. Pointers to working sites or any suggestions would be helpful. Second item (less pressing). The animations tend to wiggle while they open. Particularly the lower LI items. I tried Accordion, but I couldn't get it working reliably in IE. Thanks. <html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="home_files/jquery-1.3.2.js"></ script> <style type="text/css"> ul#accordion { padding:0; margin:0; list-style:none; width:280px; height:432px; position:relative; overflow:hidden;} .pubDate{ color:#FFD393;} #accordion li.accordionElement { height:24px; line-height:24px; padding:2px; overflow:hidden; } #accordion li div.header { padding-left:5px; font-weight: bold; color:#A1341B; background: #FF974F url(home_files/theme/images/ui- bg_glass_65_FF974F_1x400.png) 50% 50% repeat-x; border: 1px solid #263631; } #accordion li.accordionElement div { height:24px; line-height:24px; } #accordion li.accordionElement div a { font-weight: normal; color:#000; line-height: normal; } </style> <script type="text/javascript"> $(document).ready(function(){ startH = 24; endH = 175; animate (endH) $("#accordion .accordionElement").mouseover(function() { if (this.className.indexOf('opened') == -1) { animate(startH) $('.opened').removeClass('opened'); $(this).addClass('opened'); animate(endH) } }); function animate(element) { $('.opened').animate({"height": element + "px"}, 1000); } }); </script> </head><body> <table style="border: 0pt none ;" id="outer" width="800"> <tr> <td rowspan="2" valign="top" class="left" width="300px"> <ul id="accordion"> <li class="accordionElement opened"> <div class="header">title 1</div> <div> <a href="#"> <b class="pubDate">July, 2008</b><br> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </a> </div> </li> <li class="accordionElement"> <div class="header">title 2</div> <div> <a href="#"> <b class="pubDate">December, 2007</b><br> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </a> </div> </li> <li class="accordionElement"> <div class="header">title 3</div> <div> <a href="#"> <b class="pubDate">August, 2007</b><br> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </a> </div> </li> <li class="accordionElement"> <div class="header">title 4</div> <div> <a href="#"> <b class="pubDate">January, 2007</b><br> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </a> </div> </li> <li class="accordionElement"> <div class="header">title 5</div> <div> <a href="#"> <b class="pubDate">August, 2006</b><br> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </a> </div> </li> <li class="accordionElement"> <div class="header">title 6</div> <div> <a href="#"> <b class="pubDate">February, 2006</b><br> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </a> </div> </li> <li class="accordionElement"> <div class="header">title 7</div> <div> <a href="#"> <b class="pubDate">January, 2006</b><br> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </a> </div> </li> <li class="accordionElement"> <div class="header">title 8</div> <div> <a href="#"> <b class="pubDate">December, 2005</b><br> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </a> </div> </div> <li class="accordionElement"> <div class="header">title 9</div> <div> <a href="#"> <b class="pubDate">March, 2005</b><br> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </a> </div> </li> <li class="accordionElement"> <div class="header">title 10</div> <div> <a href="#> <b class="pubDate">July, 2004</b><br> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </a> </div> </li> </ul> </td> </tr> </table> </body> </html>