Question

在https://xjour.com上我有一个跳跃的导航动画。

确实可以在FF和Chrome上跳转。

在Edge和移动设备上按预期工作。

我制作了一个JSFiddle来重现这个问题。

虽然它按预期工作。

请在导航栏外单击以关闭它 - 而不是在链接上。

代码只不过是

function open() {


        $('.menu').animate({
            'width':'17vw'
        },100)

        $('html').one('click', close)
}

function close() {

        $('.menu').animate({
            'width':'2.994vw'
        },100)


        $('.menu').one('click',open)
}

$('.menu').one('click',open);

Answer 1

由于安全连接失败，我无法访问您的示例网站，但是小提琴也没问题。

在CSS3之前，jQuery animate曾经是一个很好的解决方案，但它可能会遇到来自Javascript的一些性能问题。据我所知，它基于超时功能计算和移动元素位置动画。根据您制作动画的元素数量，或者javascript当时是否真的忙于做其他事情，这可能会非常激动。

这里常见的解决方案是使用专门为此设计的CSS3功能。您最终可以将jQuery解决方案用作旧浏览器的后备（如果支持CSS3，您可以使用javascript检测解决方案）。

CSS3过渡通过在CSS属性上设置转换来实现：

.menu{
    transition: width 0.1s linear 0s;
    -moz-transition: width 0.1s linear 0s;
    -webkit-transition: width 0.1s linear 0s;
    -o-transition: width 0.1s linear 0s;
    -ms-transition: width 0.1s linear 0s;
}

然后，当修改属性值时，broswer会自动为其设置动画：

$('.menu').css({
    'width':'41vw'
});

这是一个小提琴： https://jsfiddle.net/fz4pwwjj/2/

为什么jQuery .animate（）跳了？

1 个答案: