jQuery UI bounceslide animation not working?
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 -->
It works when you select a container above the container that is expanded. I assume this is the standard behaviour.
I know this is an old question that you've probably long since figured out, but I was running into nearly this exact problem today, so I created a working example here. I removed some of your styling for width and other minor changes, but changed very little to your original work so I suspect you were running on IE which does not show animations at all. At least now if someone else comes across this question they can find a working example.
加载中,请稍侯......
精彩评论