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選擇與許多功能無法正常工作

回答

相關問題