gpt4 book ai didi

javascript - jQuery toggleClass - 不能动画或给它一个过渡

转载 作者:行者123 更新时间:2023-11-28 15:30:19 25 4
gpt4 key购买 nike

我的代码有一个小问题。我有一个元素,当页面滚动时它会出现。但是,我无法让它以更流畅的方式“出现”。我已经尝试过 CSS 过渡和淡入,但都不起作用。它总是“跳”进来,我无法让它放松。

代码如下:

$(window).on("scroll", function () {
$('.navbar').toggleClass('visible', $(document).scrollTop() > 40);
});

所以它看起来很好,但我不知道如何动画添加类名。

顺便说一句,这是 CSS:

.navbar {
visibility: hidden;
}

.navbar.visible {
visibility: visible;
}

最佳答案

visibility 无法使用 CSS 转换动画。

但是你可以这样做:

.navbar {
opacity: 0;
transition: opacity .5s ease; // Feel free to use prefixes.
}

.navbar.visible {
opacity: 1;
}

CSS 过渡/动画无疑是 2014 年动画效果的最佳方式。您应该避免使用 fadeToggle() 和其他 jQuery 动画方法。

关于javascript - jQuery toggleClass - 不能动画或给它一个过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21760159/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com