gpt4 book ai didi

javascript - 如何使用 CSS-transition/transform through JS 在每次点击时将对象旋转 120 度

转载 作者:太空宇宙 更新时间:2023-11-04 13:00:41 25 4
gpt4 key购买 nike

每次按下按钮时,我都想将我的 blueRect 从它的位置旋转 120 度,我无法让它工作哦,谁能看出我的代码有什么问题?我知道我还没有得到所有的前缀。 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>

最佳答案

.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)'
});

顺便说一句,这会引发错误,因为您的初始代码有大括号 ({}) 但实际上应该有方括号 ([]),因为它不包含键值对。下次好好利用浏览器中的 JS 控制台(或使用 Firefox 时使用 FireBug)。

关于javascript - 如何使用 CSS-transition/transform through JS 在每次点击时将对象旋转 120 度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25488166/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com