我有一个元素,我用jquery向其中添加类,以便动画化/执行背景属性的CSS转换。我的目的是在过渡运动时暂停过渡,我想也许我可以通过获取元素的当前背景属性,然后将css设置为所获得的属性来实现这一点。
HTML
<div id="productimage">
</div>
CSS
#productimage {
-webkit-transition: all 2.5s ease-out; -moz-transition: all 2.5s ease-out; -o-transition: all 2.5s ease-out;
}
#productimage.step2 {
background-size:1500px 2275px;
background-position: 30% 30%;
}
#productimage.step3 {
background-image: url("../img/blusen-back.jpg");
background-size:396px 600px;
-webkit-transition: all 2.5s ease-out; -moz-transition: all 2.5s ease-out; -o-transition: all 2.5s ease-out;
}
要获取背景的属性,可以使用:
element.css()
这是链接
和一个JSFiddle:Link
希望这能帮助
$(function() {
$('#giveMetheCurrentStyle').click(function() {
var obj, matrix;
obj = document.getElementById('circle');
matrix = getComputedStyle(obj).getPropertyValue('transform');
console.log(matrix);
//$("#myDiv").css('transform', matrix)
});
});
在此处阅读更多信息http://dev.opera.com/articles/view/understanding-3d-transforms/