[英]Problems applying the CSS transition property using javascript and a jQuery .each() loop
为了创建一些swooshey菜单,我正在尝试使用jQuery在<li>
元素上设置CSS转换属性。 HTML看起来像这样:
<ul class="main-nav">
<li>
<a href="#">Top Level 1</a>
<ul class="main-nav-child">
<li><a href="#">Second Level 1</a></li>
<li><a href="#">Second Level 2</a></li>
<li><a href="#">Second Level 3</a></li>
<li><a href="#">Second Level 4</a></li>
<li><a href="#">Second Level 5</a></li>
</ul>
</li>
<li>
<a href="#">Top Level 2</a>
<ul class="main-nav-child">
...
</ul
</li>
</ul>
我正在尝试将"transform 0.3s ease-in-out XXXXs, padding-left 0.1s ease"
转换应用于.main-nav-child
每个元素,其中XXX针对菜单中的每个项目增加。
我正在使用.each()
循环迭代每个顶级列表项,然后在其中另一个迭代内部列表中的项。 我正在尝试使用javascript设置转换:
$('.main-nav > li').each(function(i, child) {
$(child).find(".main-nav-child li").each(function(j, c) {
c.style.WebkitTransition = "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
c.style.MozTransition = "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
c.style.MsTransition = "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
c.style.OTransition = "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
c.style.transition = "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease"
});
});
读完这篇文章之后 ,我尝试使用jQuery的.css
方法:
$('.main-nav > li').each(function(i, child) {
$(child).find(".main-nav-child li").each(function(j, c) {
$(c).css({
WebkitTransition : "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
MozTransition : "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
MsTransition : "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
OTransition : "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
transition : "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease"
});
});
});
我也尝试使用CSS样式而不是DOM样式属性名称:
$('.main-nav > li').each(function(i, child) {
$(child).find(".main-nav-child li").each(function(j, c) {
$(c).css("-webkit-transition", "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease");
});
});
循环似乎工作得很好,并且在使用Chrome的Web检查器之后,似乎当我尝试将c.style.WebkitTransition
设置为某些东西时,它可以正常工作,但该属性不会存储。 它在控制台中也是如此(请访问: http : //cl.ly/Lbau )
我在半天的大部分时间都在玩这个,所以如果有人能帮助我,我会非常感激!
干杯。
Transform不是受支持的动画属性。 资源
取出变换设置,它应该设置得很好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.