Question

我调用的方法：

vm.progress = function () {
    $('.progress-line').width('100%').animate({ width: 0 }, 5, 'linear', 1000);
}

HTML：

<div class="progress-outer">
    <div class="progress-line red"></div>
</div>

CSS：

.progress-outer {
    position: relative;
    height: 10px;
    width: 100%;
}

.progress-line {
    position: absolute;
    height: 100%;
    width: 0;
}

必须在5秒内将进度条从100％设置为0。但它不起作用。但是，如果我将方法分成两个函数并通过单击按钮（仅限于）来调用它们，则它可以正常工作。

Answer 1

您编写错误的语法来链接动画功能检查以下代码

 setInterval(function () {
    $(".progress-line").animate({width:
   "100%"},5000).animate({width:"0%"},6000);   
   },5000);

检查工作演示jsfiddle

Answer 2

对于时间限制，您应该使用

$(".progress-line").animate({width: "100%"},5000); // time 5000 is in milliseconds

这是可以帮助你的小提琴。我使用背景颜色来显示动画

https://jsfiddle.net/simerjit/rgskzcj5/2/

在此处检查jquery动画功能详细信息... http://www.w3schools.com/jquery/eff_animate.asp

具有许多功能的JQuery选择器无法正常工作

2 个答案: