jQuery选择与许多功能无法正常工作

，我调用的方法：jQuery选择与许多功能无法正常工作

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。但它不起作用。但是，如果我将方法分成两个函数并通过单击按钮（并且仅仅）来调用它们，它就可以工作。

来源

2016-09-29 Feeco

请显示html以及 –

时间限制，你应该使用

$(".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

来源

2016-09-29 06:27:42

每次执行动画时，我必须从100播放动画（[[fiddle]（https://jsfiddle.net/zzw76zgL/））。它不会第二次生成动画。它也必须在动画之前将宽度重置为0。 – Feeco

你的意思是，第一个宽度是100％，然后使用动画，它会减少到0％，对不对？ –

如果是的话，那么请检查相同的小提琴，我已经更新了......你只需要设置宽度100％，然后在jquery中设置动画为0％ –

你写错语法链接动画功能检查下面的代码

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

检查工作演示jsfiddle

来源

2016-09-29 07:10:10

jQuery选择与许多功能无法正常工作

回答

相关问题