blocks|key|780416|text|尝试使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|780417|$('#objectID').css('transition-duration','1s');

$('#objectID').css('transition-duration');|code-block|syntax|javascript|780418|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try with:

<pre><code>$('#objectID').css('transition-duration','1s');

$('#objectID').css('transition-duration');
</code></pre>

blocks|key|1098157|text|更简单的答案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1098158|parseFloat(getComputedStyle(targetElement)['transitionDuration'])|code-block|syntax|javascript|1098159|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Simpler answer:

<pre><code>parseFloat(getComputedStyle(targetElement)['transitionDuration'])
</code></pre>

blocks|key|780518|text|function+getTransitionProperty(element)+{
++//+Note+that+in+some+versions+of+IE9+it+is+critical+that
++//+msTransform+appear+in+this+list+before+MozTransform
++var+properties+=+[
++++'transition',
++++'WebkitTransition',
++++'msTransition',
++++'MozTransition',
++++'OTransition'
++];
++var+p;
++while+(p+=+properties.shift())+{
++++if+(typeof+element.style[p]+!=+'undefined')+{
++++++return+p;
++++}
++}
++return+false;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|780519|这将返回所有主要浏览器的转换值。|unstyled|780520|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>function getTransitionProperty(element) {
 // Note that in some versions of IE9 it is critical that
 // msTransform appear in this list before MozTransform
 var properties = [
 'transition',
 'WebkitTransition',
 'msTransition',
 'MozTransition',
 'OTransition'
 ];
 var p;
 while (p = properties.shift()) {
 if (typeof element.style[p] != 'undefined') {
 return p;
 }
 }
 return false;
}
</code></pre>

This will return the transition value for all major browsers.

blocks|key|1098181|text|下面是一个jQuery函数，它将以毫秒为单位返回传递给它的元素或选择器的转换持续时间：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1098182|function+getTransitionDuration(elementOrSelector){
++++var+$el,+durString,+isMS,+numberStr,+numberNum;
++++$el+=+$(elementOrSelector);
++++if($el.length+===+0+){
++++++++return+false;
++++}
++++$el+=+$($el[0]);+//+Force+just+the+first+item.++need+more?++use+.each
++++durString+=+$el.css('transition-duration').toLowerCase();
++++isMS+=+durString.indexOf("ms")+>=+0;
++++numberStr+=+durString.match(/\d/);
++++numberNum+=+parseInt(numberStr[0],+10);
++++return+isMS+?+numberNum+:+numberNum+*+1000;
};|code-block|syntax|javascript|1098183|这将仅返回包装集中第一个项目的持续时间，即使选择器匹配多个项目也是如此。还需要更多吗？在.each回调中使用它|offset|length|1098184|返回：|1098185|当元素或选择器与元素匹配并具有转换duration.时，|1098186|Milliseconds+(int)+|unordered-list-item|style|BOLD|1098187|1098188|1098189|1098190|​|1098191|当元素或选择器与元素匹配并且没有转换持续时间或转换持续时间为0.时，|1098192|0+(int)+|1098193|1098194|1098195|1098196|1098197|当元素或选择器不存在或与任何elements.都不匹配时，|1098198|false+(bool)+|1098199|1098200|1098201|1098202|1098203|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/each/^0|0|0|18|5|0|0|0|0|0|I|1|1|0|0|0|0|0|7|1|1|0|0|0|0|0|C|1|1|0|0|0^^$0|@$1|2|3|4|5|6|7|1M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1O|8|@]|9|@$I|1P|J|1Q|1|1R]]|A|$]]|$1|K|3|L|5|6|7|1S|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1T|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|1U|8|@$I|1V|J|1W|R|S]]|9|@]|A|$]]|$1|T|3|-4|5|Q|7|1X|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|20|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|21|8|@]|9|@]|A|$]]|$1|10|3|11|5|Q|7|22|8|@$I|23|J|24|R|S]]|9|@]|A|$]]|$1|12|3|-4|5|Q|7|25|8|@]|9|@]|A|$]]|$1|13|3|-4|5|6|7|26|8|@]|9|@]|A|$]]|$1|14|3|-4|5|6|7|27|8|@]|9|@]|A|$]]|$1|15|3|X|5|6|7|28|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|29|8|@]|9|@]|A|$]]|$1|18|3|19|5|Q|7|2A|8|@$I|2B|J|2C|R|S]]|9|@]|A|$]]|$1|1A|3|-4|5|Q|7|2D|8|@]|9|@]|A|$]]|$1|1B|3|-4|5|6|7|2E|8|@]|9|@]|A|$]]|$1|1C|3|-4|5|6|7|2F|8|@]|9|@]|A|$]]|$1|1D|3|X|5|6|7|2G|8|@]|9|@]|A|$]]|$1|1E|3|-4|5|6|7|2H|8|@]|9|@]|A|$]]]|1F|$1G|$5|1H|1I|1J|A|$1K|1L]]]]

Here is a jQuery function that will return, in milliseconds, the transition duration of either an element or a selector passed to it:

<pre><code>function getTransitionDuration(elementOrSelector){
 var $el, durString, isMS, numberStr, numberNum;
 $el = $(elementOrSelector);
 if($el.length === 0 ){
 return false;
 }
 $el = $($el[0]); // Force just the first item. need more? use .each
 durString = $el.css('transition-duration').toLowerCase();
 isMS = durString.indexOf("ms") &gt;= 0;
 numberStr = durString.match(/\d/);
 numberNum = parseInt(numberStr[0], 10);
 return isMS ? numberNum : numberNum * 1000;
};
</code></pre>

This will only return the duration of the first item in the wrapped set, even if the selector matches more than one item. Need more? use this in a <a href="http://api.jquery.com/each/" rel="nofollow">.each</a> callback

Returns:

<ul>
<li>Milliseconds (int)

<ul>
<li>When the element or selector matches an element AND has a transition duration.</li>
</ul></li>
<li>0 (int)

<ul>
<li>When the element or selector matches an element AND has either no transition duration or a transition duration of 0.</li>
</ul></li>
<li>false (bool)

<ul>
<li>When the element or selector either doesn't exist or matches no elements.</li>
</ul></li>
</ul>

blocks|key|5136364|text|我知道这个答案可能来得太晚了，但我只是想弄清楚：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5136365|function+getTransitionDuration+(el,+with_delay){
var+style=window.getComputedStyle(el),
++++duration+=+style.webkitTransitionDuration,
++++delay+=+style.webkitTransitionDelay;+

//+fix+miliseconds+vs+seconds
duration+=+(duration.indexOf("ms")>-1)+?+parseFloat(duration)+:+parseFloat(duration)*1000;
delay+=+(delay.indexOf("ms")>-1)+?+parseFloat(delay)+:+parseFloat(delay)*1000;


if(with_delay)+return+(duration+%2B+delay);
else+return+duration;
}|code-block|syntax|javascript|5136366|调用getTransitionDuration(el)将返回以毫秒为单位的持续值。调用getTransitionDuration(el，true)将返回duration和delay，单位为ms。|5136367|请注意，这只是webkit，您需要一个属性名称的修复程序才能匹配所有浏览器。|5136368|我还遇到了一个奇怪的bug，在获取属性时，100ms的延迟转换为100.00000149011612。|5136369|http://jsfiddle.net/z3bKD/2/|offset|length|5136370|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|10|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|11|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|12|8|@]|9|@$O|13|P|14|1|15]]|A|$]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|N]]]]

I know this answer comes probably too late, but I was just sorting it out:

<pre><code>function getTransitionDuration (el, with_delay){
var style=window.getComputedStyle(el),
 duration = style.webkitTransitionDuration,
 delay = style.webkitTransitionDelay; 

// fix miliseconds vs seconds
duration = (duration.indexOf("ms")&gt;-1) ? parseFloat(duration) : parseFloat(duration)*1000;
delay = (delay.indexOf("ms")&gt;-1) ? parseFloat(delay) : parseFloat(delay)*1000;


if(with_delay) return (duration + delay);
else return duration;
}
</code></pre>

Calling getTransitionDuration(el) will return duration value in ms. 
Calling getTransitionDuration(el, true) will return duration and delay in ms.

Note that this is webkit only, you would need a fix for the property name to match all the browsers. 

I am also experiencing a weird bug, when 100ms delay gets converted to something like 100.00000149011612 when getting the property.

<a href="http://jsfiddle.net/z3bKD/2/" rel="nofollow">http://jsfiddle.net/z3bKD/2/</a>

Since this sets the transition duration to 1 second: 
 <code>$('#objectID').css('webkit-transition-duration','1s');</code>

I assumed this would return the current duration value:
 <code>$('#objectID').css('webkit-transition-duration');</code>

but it does not.

How do I get the -webkit-transition-duration property with jQuery?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

因为这会将转换持续时间设置为1秒：$('#objectID').css('webkit-transition-duration','1s');我假设这将返回当前的持续时间值：$('#objectID').css('webkit-transition-duration');但事实并非如此。

问如何使用jQuery获取-webkit-transition-duration属性？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery获取-webkit-transition-duration属性？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery获取-webkit-transition-duration属性？
EN