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>
