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

当我鼠标悬停＆amp;使用右侧的mouseout元素，它可以流畅地设置透视旋转的动画（它向左移动）并返回默认位置。

在鼠标悬停类左侧的元素时，动画仍然流畅。但是当我使用鼠标输出元素时，它没有动画效果。它只需一步从-60跳到0。

控制台：

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作为占位符值进行动画处理，不能将其设置为负值，因此当值设置为负值时返回零，使元素看起来不动画回来。

您可以使用任何其他属性

$('#' + 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

增加jQuery动画中的负css值

1 个答案: