在jQuery动画中增加负css值答案

【问题标题】：Incrementating negative css value in jQuery animation在jQuery动画中增加负css值
【发布时间】：2024-01-23 11:17:01
【问题描述】：

我正在使用 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 );
        }
    );
});

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

鼠标悬停在左类元素上时，动画仍然流畅。但是，当我将元素鼠标移出时，它不会动画。它只是一步从-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 没有正确地增加负值。有没有办法让这个动画流畅？

【问题讨论】：

但它适用于大于 0 的值。我已经用stop( true, true) 尝试过它并没有影响它。控制台显示，将值 -60 增加到 -59 等直到 0 存在问题。使用值 60，它按预期递减到 0。此外，它正确地将 0 递减到 -60 并将 0 递增到 60。只是提到的第一个是有问题的。
您的浏览器注意事项是什么？也许过渡或关键帧会是更好的解决方案？
到目前为止，我已经尝试过 Chrome 和 Mozilla，这两种浏览器都是这样。
不过，我还是会为这类事情看 css 动画，它更有效，可能是最好的方法

标签： javascript jquery css animation

【解决方案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

【讨论】：