Question

每次按下按钮，我想将blueRect从它的位置旋转120度，我不能让它工作doh，任何能在我的代码中出错的人？我知道我没有得到所有的前缀。 jsfiddle：http://jsfiddle.net/a0mycee7/

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<style>
    #blueRect{
        width: 50px;
        height: 50px;
        background-color: #aaaaff;
        border: solid 3px #000000;
        margin-left: 30px;
        transition: all 2s ease-out;
        -moz-transition: all 2s ease-out;
    }
</style>

<script type="text/javascript">

   var angle = 0;

   $('#right').click(function() {
       //$(this).toggleClass('active');
       angle+=120;
        $('#blueRect').css ({
            'transform: rotate(' + angle + 'deg)',
            '-webkit-transform: rotate(' + angle + 'deg)',
               '-moz-transform: rotate(' + angle + 'deg)',
                 '-o-transform: rotate(' + angle + 'deg)',
                '-ms-transform: rotate(' + angle + 'deg)'
        });
    });
</script>
</head>
<body>

<div id="background">

    <div id="blueRect">
    </div>

</div>

<button id="right">1</button>

</body>
</html>

Answer 1

.css()函数需要哈希而不是数组：Fiddle

基本上，改变

$('#blueRect').css ({
        'transform: rotate(' + angle + 'deg)',
        '-webkit-transform: rotate(' + angle + 'deg)',
           '-moz-transform: rotate(' + angle + 'deg)',
             '-o-transform: rotate(' + angle + 'deg)',
            '-ms-transform: rotate(' + angle + 'deg)'
    });

到

$('#blueRect').css ({
        'transform': 'rotate(' + angle + 'deg)',
        '-webkit-transform': 'rotate(' + angle + 'deg)',
           '-moz-transform': 'rotate(' + angle + 'deg)',
             '-o-transform': 'rotate(' + angle + 'deg)',
            '-ms-transform': 'rotate(' + angle + 'deg)'
    });

这会引发错误BTW，因为您的初始代码具有大括号（{}），但实际上应该有方括号（[]），因为它不包含键值对。下次在浏览器中使用JS控制台（或使用Firefox时使用FireBug）。

Answer 2

传递给.css的参数不是有效对象。以下代码应该有效：

（jQuery没有装入小提琴，也需要:)）

var angle = 0;
$('#right').click(function() {
   //$(this).toggleClass('active');
   angle+=120;
    $('#blueRect').css ({
        'transform': 'rotate(' + angle + 'deg)',
        '-webkit-transform': 'rotate(' + angle + 'deg)',
           '-moz-transform': 'rotate(' + angle + 'deg)',
             '-o-transform': 'rotate(' + angle + 'deg)',
            '-ms-transform': 'rotate(' + angle + 'deg)'
    });
});

如何通过JS转换/转换每次点击旋转对象120deg

2 个答案: