Jquery 动画旋转不起作用

Question

你好我有这组代码应该在某个位置旋转图标但是它不起作用有人可以帮助我，这是我的 js 代码:

<script>
    window.setTimeout(function(){
    $( "#CDT492" ).animate({ "left": "+=212px" ,"top":"+=134px"}, 100000,"linear","alternate",{duration:10,queue: false,
    step: function(left) {
                if (left >= 11) { // stop at ~70
                    $("#CDT492").css('-webkit-transform','rotate(148deg)');
                }
            } }
        );
    }, 5000);
</script>

这个动画比较像animation style

Answer 1

我不完全确定您要做什么，但您似乎在尝试移动和旋转图像。如果您准备使用 CSS3 过渡，那么您只需将 css 值设置为您要完成的值，然后使用过渡。请参阅以下 fiddle：jsfiddle。

虽然这可行，但我认为在 javascript 中设置单独的 CSS 属性并不是很好，如果可以的话，所以最好定义一个 class（例如我们可以称它为 .rotated），然后使用 jquery $("#CDT492").addClass('rotated') 设置 class。（像这样jsfiddle）

如果你想在它已经开始移动之后开始旋转，你可以在你的过渡的旋转部分添加一个延迟。看这里：jsfiddle

Answer 2

你可以这样做吗

$(document).ready(function(){
   window.setTimeout(function(){
    $( "#CDT492" ).animate({ 
                        "left": "+=212px" 
                        ,"top":"+=134px"
                    },{
    step: function(now) {
                if (now >= 11) {
                    $("#CDT492").css({'transform':'rotate(148deg)','transition':'all ease 1s',});
                }
            } }
        );
    }, 5000);
});

Answer 3

你需要更具体地说明你想要什么样的转换，因为你说你想要旋转，然后在检查 link 之后更多的是关于转换位置。

Jquery 动画旋转不起作用

Jquery animate rotation not working

jquery

rotation

jquery-animate