jQWidgets jqxListMenu animationDuration 属性

介绍

jQWidgets 是一款强大的 jQuery 插件集合，其中包括了众多 UI 组件。jqxListMenu 是其中之一，该组件可以创建一个多层级的列表菜单，并支持多种样式和布局方式。

jqxListMenu 中的 animationDuration 属性用于设置菜单项展开和收起的动画时长。通过设置不同的动画时长可以改变菜单打开和关闭的速度。

使用方法

在初始化 jqxListMenu 组件时，可以定义 animationDuration 属性。属性值为数字类型，单位为毫秒(ms)。

$('#listMenu').jqxListMenu({
     animationDuration: 300 // 设置动画时长为 300ms
});

注意事项

• animationDuration 属性仅在 animationType 属性为 slide 或者 fade 时生效。
• 如果设置 animationDuration 属性为 0，则动画效果将会关闭。
• 此属性没有默认值，如果不设置动画时长，将不会触发动画效果。

示例

HTML 代码

<div id="listMenu"></div>

JavaScript 代码

$(document).ready(function () {
    // 初始化 jqxListMenu 组件
    $('#listMenu').jqxListMenu({
        width: '300px',
        height: '500px',
        // 设置菜单打开方式为 slide
        animationType: 'slide',
        // 设置菜单打开和关闭动画时长为 500ms
        animationDuration: 500,
        source: [
            {
                label: '菜单项1',
                items: [
                    {
                        label: '子菜单1-1'
                    },
                    {
                        label: '子菜单1-2'
                    },
                    {
                        label: '子菜单1-3'
                    }
                ]
            },
            {
                label: '菜单项2',
                items: [
                    {
                        label: '子菜单2-1'
                    },
                    {
                        label: '子菜单2-2'
                    },
                    {
                        label: '子菜单2-3'
                    }
                ]
            },
            {
                label: '菜单项3',
                items: [
                    {
                        label: '子菜单3-1'
                    },
                    {
                        label: '子菜单3-2'
                    },
                    {
                        label: '子菜单3-3'
                    }
                ]
            }
        ]
    });
});

效果如下图所示：

参考链接

• jQWidgets jqxListMenu 官方文档