探索 jQuery CSS Transform 功能与应用
// 假设我们有一个按钮用于触发旋转动画
$("#rotateButton").click(function() {
// 使用jQuery的.animate()方法和step回调实现自定义动画
$("#box").animate({ rotate: '360deg' }, {
duration: 1000,
specialEasing: {
rotate: "linear" // 确保旋转是均匀的
},
step: function(now, fx) {
// 使用.css()方法来更新元素的CSS样式
$(this).css({
transform: 'rotate(' + now + 'deg)'
});
}
});
});这个例子展示了如何使用jQuery的.animate()方法和step回调函数来实现一个简单的旋转动画。当用户点击按钮时，一个ID为box的元素会旋转360度，动画时长为1秒。specialEasing选项确保旋转的速度是线性的。step函数在每一帧都会被调用，以更新元素的CSS样式，实现动态的旋转效果。
评论已关闭