Jquery淡入+切换类（隐藏）

Posted 2023-05-08

【中文标题】Jquery淡入+切换类（隐藏）

【英文标题】：Jquery fadeIn + toggleclass(hide)

【发布时间】：2014-07-12 08:32:05

【问题描述】：

我想要的效果是 (1) “abc” div 最初没有显示，(2) 它在页面加载时慢慢淡入，(3) 页面上有一个按钮，onclick 可以切换“隐藏” “abc” div 上的类，以便我可以隐藏/显示它。

我试图实现这些目标的方式是： (1) 设置“abc” div 显示：无；最初在我的 CSS (2)使用jquery的fadeIn属性 (3) 有一个可以切换它的按钮

我知道我的按钮适用于隐藏/显示，然后我将任何 jquery 用于淡入淡出。 我知道 fadeIn 有效，因为我可以看到它淡入 但是关于这两者的一些东西意味着当它像这样淡入时，隐藏/显示按钮在元素上不起作用，即使它在我设置 display: none; 之前就起作用了。就它并尝试了jquery。

请帮忙！

我试图制作一个 jsfiddle，但它并没有完全工作。但是您可以看到我正在使用的代码的基础知识：http://jsfiddle.net/3bSB2/4/

这是其中的一部分（此代码是必需的，以便我可以包含 jsfiddle：

$(window).on("load", function() 
  $(".abc").fadeIn(525);
);

【参考方案1】：

这是因为.fadeIn() 使用了内联css。

要解决您的问题，请将!important 添加到您的display:none 像这样

.hide 
    display: none!important;

demo

或者如果你只是显示/隐藏，没有额外的css样式，你可以像这样使用.toggle()而不是.toggleClass()

$(".abc").toggle();

demo