Jquery Accordion Easing
I am trying to get a nicer feel to my drop down accordion...but it isnt happening for me...any ideas?
Here is my code in the accordion itself...
<div id="accordion">
<h3 id="branding"><a href="#">Branding</a></h3>
<div>Lorem Ipsum is simply dummy text</div>
<h3 id="website"><a href="#">Website</a></h3>
<div>Lorem Ipsum is simply dummy 开发者_运维问答text</div>
</div>
And in the head...
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#accordion').accordion({ navigation: true, easing: 'easeInBack' });
});
</script>
TypeError: $.ui.accordion.animations is undefined
The accepted answer doesn't seem to work anymore.
This:
$(function() { $("#accordion").accordion({
animated: "eib"
});
now has changed to animate:
$(function() {
$("#accordion").accordion({
animate: "easeOutBounce"
});
Solution:
$( "#accordion" ).accordion({
animate: { easing: 'easeOutBounce', duration: 1000 },
});
I've always used the 'animated' property to do this, rather than the easing plugin. e.g.:
$('#some-list').accordion({collapsible: true,
animated: 'bounceslide',
autoHeight: false});
Perhaps give that a try.
Although I've realised that this uses the easing plugin anyway!
So I did a bit of research and found a comment in this document which explains how to define your own easing-based animations. So, to do what you want, you could use the following:
$.ui.accordion.animations.eib = function(settings) {
this.slide(settings, {
easing: "easeInBack",
duration: 600
});
}
$(function() {
$("#accordion").accordion({
animated: "eib"
});
精彩评论