jQuery的等效CSS選擇進步:: - WebKit的進步價值

我需要調整的過渡時間爲HTML5 <progress> -Bar與JS（jQuery的），但我無法找到在jQuery的正確選擇這樣做。jQuery的等效CSS選擇進步:: - WebKit的進步價值

我目前的嘗試：

CSS：

progress::-webkit-progress-value { 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
    -o-transition: all 0.5s; 
    -ms-transition: all 0.5s; 
    transition: all 0.5s; /* Works like a charm */ 
}

JavaScript（沒有成功）：

// These lines do nothing when the progress value changes: 
$(".progressSelectorClass[progress-value]").css({"-webkit-transition" : "all 6s"}); 
$(".progressSelectorClass > *").css({"-webkit-transition" : "all 6s"}); 
$(".progressSelectorClass").css({"-webkit-transition" : "all 6s"}); 

// This gets an error: 
$(".progressSelectorClass::-webkit-progress-value").css({"-webkit-transition" : "all 6s"});

是否有機會選擇在JavaScript中progress::-webkit-progress-value（有或無的jQuery ）？

在此的jsfiddle你會更清楚地看到我嘗試做： http://jsfiddle.net/rD5Mc/1/

更新：

我得到一個醜陋的解決方法的效果通過添加/更改data-animation-time參數到<progress> -element並創建瞭如下幾個CSS類：

progress[data-animation-time="5"]::-webkit-progress-value { -webkit-transition: all 5s; } 
progress[data-animation-time="10"]::-webkit-progress-value { -webkit-transition: all 10s; } 
progress[data-animation-time="15"]::-webkit-progress-value { -webkit-transition: all 15s; } 
progress[data-animation-time="20"]::-webkit-progress-value { -webkit-transition: all 20s; } 
progress[data-animation-time="25"]::-webkit-progress-value { -webkit-transition: all 25s; } 
...

它的工作原理，但我很不滿意我的解決方案。必須有更好的辦法...

來源

2013-04-17 wildhaber

，則應該設置的jsfiddle我想 –

@roasted我能做到這一點，但如果是與非工作選擇的意義嗎？ – wildhaber

@godesign下面的答案適合你嗎？ – Trolleymusic

你可以使用javascript來修改css規則！

var rule; 

$(".animationtimeFirst").change(function() { 
    time = $(this).val(); 


    // Write out out full CSS selector + declaration 
    s = '.progressselector::-webkit-progress-value { -webkit-transition: all ' + time + 's; }'; 

    // Check the rules 
    // If there's no rules, 
    if ((!rule && rule !== 0) || !document.styleSheets[0].cssRules.length) { 
     // Make one! -- Insert our CSS string into the page stylesheet 
     rule = document.styleSheets[0].insertRule(s, 0); 
     // I think this code is different in IE, beware! 
     console.log('Our rule is #' + rule); 
    } else { 
    // If we already have a rule we can change the style we've implement for the psuedo class 
    document.styleSheets[0].rules[rule].style.webkitTransitionDuration = time.toString() + 's'; 
    } 
});

這裏有一個更新的小提琴：http://jsfiddle.net/trolleymusic/MHYY8/3/ - 希望它幫助:)

來源

2013-04-19 23:32:28 Trolleymusic

感謝您的回答，在將它應用到我的移動應用程序中時遇到了一些麻煩，但它給了我更正確的輸入以更加動態地解決它。我已經使用了一行代碼，比如'$（「頭」）追加（「」）;'，並刪除它之前，我更新的選擇。所以我給你獎勵你的努力，因爲我從你的答案中學到了新東西:-) – wildhaber

啊，好的。謝謝：） – Trolleymusic

progress::-webkit-progress-value不是DOM的元素（暗影DOM它的一部分，雖然）。所以你不能用jQuery或任何DOM方法來獲取它。

這一切都歸結爲您的解決方法。

編輯：

事實證明，在最新版本的Chrome實際上，你可以用webkitShadowRoot屬性來訪問陰影DOM。不幸的是，它不適用於<progress />元素。

來源

2013-04-24 21:51:22 zeroflagL

jQuery的等效CSS選擇進步:: - WebKit的進步價值

回答

相關問題