开发者

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"
 });
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜