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值设置为您要完成的内容，然后使用过渡。请参阅以下小提琴：jsfiddle。

虽然这有效，但我认为如果你可以避免在javascript中设置单独的CSS属性真的很棒，那么定义一个类可能会更好（例如我们可以称之为.rotated）然后使用jquery $("#CDT492").addClass('rotated')设置类。（像这样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

你需要更具体地说明你想要什么样的转换，因为你说你想要轮换，然后在检查链接之后，它更多的是转换位置。

Jquery动画旋转不起作用

3 个答案: