博客

jQWidgets jqxResponsivePanel animationHideDelay属性

  • Post category:jquery

jQWidgets jqxResponsivePanel animationHideDelay属性

jqxResponsivePanel是jQWidgets库中的响应式面板控件。animationHideDelay属性用于控制面板关闭时的动画效果延迟时间，即关闭面板时面板的渐隐动画时长。本攻略将详细讲解animationHideDelay属性的使用方法。

属性语法

animationHideDelay的语法如下：

animationHideDelay: Number

参数说明：

  • Number：表示面板关闭时的动画效果延迟时间，单位为毫秒，默认为250毫秒。

属性示例

示例1：

在下面的示例中，我们将jqxResponsivePanel的animationHideDelay属性设置为500毫秒。当点击按钮关闭面板时，面板会在500毫秒内逐渐渐隐直至消失。

HTML代码：

<div id="responsivePanel" style="width: 200px; height: 200px;">
    <div>响应式面板内容</div>
</div>

<button id="closePanelBtn">关闭面板</button>

JS代码：

$("#responsivePanel").jqxResponsivePanel({
    animationType: 'fade',
    animationHideDelay: 500
});

$("#closePanelBtn").click(function(){
    $("#responsivePanel").jqxResponsivePanel('hide');
});

示例2：

我们也可以通过编写CSS样式表来控制jqxResponsivePanel的关闭动画效果。

HTML代码：

<div id="responsivePanel" style="width: 200px; height: 200px;">
    <div>响应式面板内容</div>
</div>

<button id="closePanelBtn">关闭面板</button>

CSS代码：

.jqx-responsive-panel-hide {
    opacity: 0;
    transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -webkit-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
}

JS代码：

$("#responsivePanel").jqxResponsivePanel({
    animationType: 'none'
});

$("#responsivePanel").on('closed', function(){
    $(this).removeClass('jqx-responsive-panel-hide');
});

$("#closePanelBtn").click(function(){
    $("#responsivePanel").addClass('jqx-responsive-panel-hide').jqxResponsivePanel('hide');
});

在这个示例中，我们将animationType属性设置为’none’，表示不使用jqxResponsivePanel的默认关闭动画效果。我们再选择一个CSS样式表定义了面板关闭时的逐渐透明过渡动画。在按钮点击事件中，当我们关闭面板时，将使用addClass()方法来添加样式，面板逐渐透明过渡消失，直到完成透明效果的过渡特效。

Tags: