javascript - jQuery addClass removeClass 动画当 div 不显示时

标签 javascript jquery css

当 div 为 display:none 时,可以将 jQuery addClass 与动画结合起来吗?

jQuery

 $(window).scroll(function() {
        $(this).scrollTop() > 100 ? $(".nav-current").addClass("hide") : $(".nav-current").removeClass("hide");
        $(this).scrollTop() > 100 ? $(".nav-affix").addClass("show") : $(".nav-affix").removeClass("show");
        $(this).scrollTop() > 50 ? $(".navbar").addClass("go-top navbar-fixed-top") : $(".navbar").removeClass("go-top navbar-fixed-top");
    });

CSS

.show {
    display: block;
}

.hide {
    display: none;
}

.nav-affix {
    display: none;
    > li {
        > a {
            font-size: 12px !important;
            transition: all 0.3s;
        }
    }
 }

最佳答案

同意 fauxserious - 您可以使用 fadeIn 和 fadeOut jQuery 函数来实现您的目标。

另一个选择是使用width(1000)height(1000) 其中参数 (1000) 是以毫秒为单位的持续时间,因此你可以获得一些动画。

如果您还有问题,请告诉我。

关于javascript - jQuery addClass removeClass 动画当 div 不显示时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33723717/

相关文章:

javascript - 渐变/不透明度解决方法

javascript - 如何使用 jest 测试 React 组件?

javascript - 从多个柏树 promise 中收集结果

javascript - Three.js 阴影不起作用

javascript - 在 jQuery weekcalendar 插件中为事件设置不同的背景颜色

css - 试图让我的网站响应

javascript - "Uncaught SyntaxError: Unexpected token <"导入时出错

Javascript - 通过引用定义对象属性名称

javascript - 如果子元素和父元素具有相同的类,则不显示

jQuery - 替换从外部 js 文件动态创建的元素的文本/HTML