javascript - 在 jQuery 动画中增加负 css 值

Question

我正在使用 jQuery 以透视方式转换 div:

function rotate ( id, value ) {
$('#' + id).stop().animate({  borderSpacing: value }, {
    step: function(now,fx) {
        console.log( now );
        $(this).css({
                'transform': 'rotateY('+now+'deg)',
                '-ms-transform': 'rotateY('+now+'deg)',
                '-webkit-transform': 'rotateY('+now+'deg)'
            });  
    },
    duration: 'slow'
});
}

然后我用下面的代码调用它:

$(document).ready(function(){
    $(".left").hover(
        function() {
            rotate( 'right', -60 );
        },
        function() {
            rotate( 'right', 0 );
        }
    );
    $(".right").hover(
        function() {
            rotate( 'left', 60 );
        },
        function() {
            rotate( 'left', 0 );
        }
    );
});

当我将鼠标悬停和鼠标移出类为 right 的元素时，它会流畅地动画透视旋转(它指向左侧)并返回到默认位置。

将鼠标悬停在左侧类的元素上时，动画仍然流畅。但是，当我将元素移出时，它不会动画。它只是一步从 -60 跳到 0。

Console:

0
-4.258052828290663
-5.455508477249294
-6.985045445541011
-58.43305230028757
...
-59.01803258327631
-59.49764722691864
-59.81882866365539
-59.97368490296575
-60
0
0
0
...(42x 0)
0

如您所见，jQuery 不会正确地增加负值。有没有办法让这个动画流畅？

Answer 1

是使用border-spacing作为占位值来做动画，不能设置为负值，所以设置为负值时返回0，使得元素似乎没有动画返回。

您可以改用任何其他属性

$('#' + id).stop(true, true).animate({
    test : value
}, {
    step: function (now, fx) {
        $(this).css({
            'transform': 'rotateY(' + now + 'deg)',
            '-ms-transform': 'rotateY(' + now + 'deg)',
            '-webkit-transform': 'rotateY(' + now + 'deg)'
        });
    },
    duration: 'slow'
});

举几个例子

With border-spacing
Without border-spacing