Question

现在我正在创建一个菜单，我遇到了这个fadeIn命令的问题

这是代码：

var main = function () {
"use strict";

$('.whoWeAre').addClass('inactive-slide');

$('.nav li:nth-child(1)').click(function () {

    $('.whoWeAre').addClass('inactive-slide').removeClass('active-slide');
    $('.welcome').fadeIn(600).addClass('active-slide');

});

$('.nav li:nth-child(2)').click(function () {

    $('.welcome').addClass('inactive-slide').removeClass('active-slide');
    $('.whoWeAre').fadeIn(600).addClass('active-slide')

});
};

$(document).ready(main);

根据点击的按钮切换显示的内容。并且在没有添加.fadeIn的情况下工作正常。但是第二个我添加它，似乎.removeClass（'active-slide'）或.addClass（'inactive-slide'）停止工作，因为在点击它们之后将显示两个段落。

如果你想亲眼看看：https://jsfiddle.net/royal_wisdom/z67ummw2/46/

Answer 1

.fadeIn()在元素上放置一个style="display: block;"来覆盖你的CSS类以隐藏元素。所以，基本上你需要增加CSS规则的CSS特性以隐藏元素。

一种方法是添加!important：

.inactive-slide {
    display: none !important;
}
.active-slide {
    display: block !important;
}

工作演示：https://jsfiddle.net/jfriend00/1pxndm3e/

为什么添加.fadeIn会破坏这种行为？

1 个答案: