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

Question

所以我已经看到了一个关于如何使用 jQuery 和 CSS3 操作旋转 DIV 的好例子，我现在的问题是，当我试图在 div 上创建一个光滑的悬停效果时，我需要 DIV 将 backwords 转到 -15deg 然后前进到 15 度。

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

发生的情况是，当您第一次按“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');

});​

Answer 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");

});​