Jquery 手风琴缓动

发布于 2024-08-11 01:06:48 字数 1031 浏览 4 评论 0原文

我试图让我的下拉式手风琴有更好的感觉...但这对我来说没有发生...有什么想法吗?

这是我在手风琴本身的代码......

    <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>

以及在头部......

<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>

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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

层林尽染 2024-08-18 01:06:49
TypeError: $.ui.accordion.animations is undefined

接受的答案似乎不再有效。

这:

$(function() {    $("#accordion").accordion({
    animated: "eib"  
});

现在已更改为动画:

 $(function() {
   $("#accordion").accordion({
     animate: "easeOutBounce"
 });

解决方案:

$( "#accordion" ).accordion({ 
    animate: { easing: 'easeOutBounce', duration: 1000 }, 
});
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 }, 
});
不必你懂 2024-08-18 01:06:49

我一直使用“动画”属性来执行此操作,而不是缓动插件。例如:

 $('#some-list').accordion({collapsible: true, 
                            animated: 'bounceslide', 
                            autoHeight: false});

也许可以尝试一下。

尽管我已经意识到这无论如何都使用了缓动插件!

因此,我做了一些研究,并在此文档中找到了一条评论解释如何定义您自己的基于缓动的动画。因此,要做你想做的事,你可以使用以下内容:

 $.ui.accordion.animations.eib = function(settings) {
   this.slide(settings, {
     easing: "easeInBack",
     duration: 600
   });
 }      

 $(function() {
   $("#accordion").accordion({
     animated: "eib"
 });

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"
 });
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文