在css转换JQUERY期间获取元素的背景属性



我有一个元素,我用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/

最新更新