Jquery fadeIn + toggleclass(hide)

时间:2014-05-23 05:21:49

标签: jquery css jquery-animate fadein

我想要的效果是(1)“abc”div没有显示,(2)它在页面加载时缓慢淡入,(3)页面上有一个按钮,用于切换“隐藏”在“abc”div上的类,这样我就可以隐藏/显示它。

我试图实现这些目标的方式是: (1)将“abc”div设置为display:none;最初在我的CSS中 (2)使用jquery fadeIn属性 (3)有一个切换它的按钮

我知道我的按钮适用于hide / show,然后我将fadeIn放入其中。 我知道fadeIn有效,因为我可以看到它淡入 但是关于这两者的一些东西意味着隐藏/显示的按钮在元素褪色时不起作用,即使它在我设置display:none之前有效;在它上面并尝试了jquery。

请帮忙!

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

这是它的一部分(这段代码是必需的,所以我可以包含jsfiddle:

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

1 个答案:

答案 0 :(得分:1)

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

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

.hide {
    display: none!important;
}

demo

或者如果您只是显示/隐藏,而没有其他css样式,则可以使用.toggle()代替.toggleClass()这样

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

demo