Hi, i'm trying to use the animation 'bounceslide' but I'm not seeing any bounce! Any ideas - I'm pretty new to jQuery.
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Accordion</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/effects.core.js"></script>
<script type="text/javascript" src="js/ui.accordion.js"></script>
<script type="text/javascript">
$(function() {
$("#accordion").accordion({
collapsible: true,
active:false,
animated: 'bounceslide'
});
});
</script>
<style type="text/css">
body {
font-family: Helvetica, Arial, sans-serif;
}
.demo {
width:750px;
margin: 0 auto;
}
h3+div{
background: rgba(0,0,0,.2);
padding:4px;
}
h3 {
background:#4495D1 url(alert-overlay.png) 0% 0% repeat-x;
cursor: pointer;
outline: none;
padding: 10px;
}
h3:hover {
background-color: #555;
}
h3 a {
color: white;
text-decoration: none;
}
</style>
</head>
<div class="demo">
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
</div>
</div><!-- End demo -->