jQuery equivalent for css selector progress::-webkit-progress-value

[godesign]

I need to adjust the transition time for an HTML5 ``-Bar with JS (jQuery) but I cannot find the right selector in jQuery doing this.

My current tries:

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 (with no success):

// 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 will return an error:
$(“.progressSelectorClass::-webkit-progress-value”).css({“-webkit-transition” : “all 6s”});

Is there any chance to select the `progress::-webkit-progress-value` in JavaScript (with or without jQuery)?

[Robin]

Hi,

You’ll want to do this

$(document).ready(function() {
$(‘#div’).html($(‘#progress’).val());
});

or

You can try this

$(‘#progress’).val();

You can’t select using the entire tag with jQuery.

[godesign]

Hi rahuldsg,

Thanks for your reply, but I’m not having problems getting or setting the value of the progress-bar. I try to adjust the css `transition` on the `progress-value`.

[godesign]

I’ve just created a jsFiddle that should be more clearly what I try to achieve:
[http://jsfiddle.net/rD5Mc/](http://jsfiddle.net/rD5Mc/ “http://jsfiddle.net/rD5Mc/”)

[Author]

Posts