在 DIV 上使用 jQuery 进行 CSS Rotate 会导致异常对齐答案

【问题标题】：CSS Rotate with jQuery on a DIV causes unusual snapping在 DIV 上使用 jQuery 进行 CSS Rotate 会导致异常对齐
【发布时间】：2012-10-07 12:55:33
【问题描述】：

So I've seen a good example on how to rotate a DIV with jQuery and CSS3 manipulation，我现在的问题是，当我试图在 div 上创建一个流畅的悬停效果时，我需要 DIV 将反词转到 -15deg，然后再转到 15deg。

在示例中，我将此效果附加到单击按钮上。

发生的情况是，当您第一次按“bk”时，div 似乎会对齐，然后在您按“fwd”时再次对齐。

我似乎无法弄清楚为什么。

http://jsfiddle.net/ZnvKs/

.red
{
    width:200px;
    position:absolute;
    top:50px;
    left:50px;
    height:200px;
    background:red;
    -webkit-transform: rotate(10deg);
    border-spacing:0px;
}


$('#bk').click(function() {

    $('.red').animate({
        borderSpacing: -15
    }, {
        step: function(now, fx) {
            $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
        },
        duration: 'slow'
    }, 'linear');
});

$('#fwd').click(function() {

    $('.red').animate({
        borderSpacing: 15
    }, {
        step: function(now, fx) {
            $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
        },
        duration: 'slow'
    }, 'linear');

});

【问题讨论】：

标签： jquery jquery-animate css-transitions

【解决方案1】：

如果你调试 step 函数，它会发生两次，第一次 now 参数的值为 0，下一次它的值为 15。

你需要这一切吗？你可以通过更新类来只用 CSS 做同样的事情。

更新：

这是脚本：

http://jsfiddle.net/carlosmartinezt/ZnvKs/3/

.red
{
    width:200px;
    position:absolute;
    top:50px;
    left:50px;
    height:200px;
    background:red;
    -webkit-transform: rotate(10deg);
    -webkit-transition: 0.5s linear;
    border-spacing:0px;
}
.red.bk{
    -webkit-transform: rotate(-15deg);
}
.red.fw{
    -webkit-transform: rotate(15deg);
}

那么脚本就被简化了

$('#bk').click(function() {
    $('.red').removeClass("fw").addClass("bk");
});

$('#fwd').click(function() {
    $('.red').removeClass("bk").addClass("fw");

});

【讨论】：