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 IE. 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 could'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>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
