jQuery：如果我的CSS设置为visibility:hidden，那么如何使元素出现？

Question

在我的CSS中，我设置了一些元素的visibility:hidden属性，如何将它们显示出来？

以前我用opacity实现过，但是在IE上出现了一些错误：

var i = 0;
$mySelection.each(function(i) {
    $(this).delay((i * 100) + ($mySelection.length)).animate(
        { opacity: "1"},
        {queue:true, duration:1000, easing:"quartEaseIn"}
    ); 
})

如果我想使用jQuery控制可见性而不是opacity，我该怎么做呢？谢谢

- davidino

---

你能否告诉我们你是否已经拥有所需的东西的最新情况？如果没有，你能否提供更多细节？ - cspolton

Answer 1

$(":hidden").css("visibility", "visible");

- karim79

Answer 2

使用display: none而非visibility: hidden，若你想要淡入你的隐藏元素，请使用fadeIn。例如：

$("div:hidden").fadeIn("slow");

编辑：鉴于您想使用可见性，请尝试以下方法：

var i = 0;
$mySelection.each(function(i) {
    $(this).delay((i * 100) + ($mySelection.length)).css(
        { 'opacity': '0', 'visibility': 'visible'}).animate(
            { opacity: "1"},
            {queue:true, duration:1000, easing:"quartEaseIn"});
});

- cspolton

---

他为什么应该切换到“display”？“visibility”的行为完全不同。 - jwueller

我提出这个方案是为了简化动画。请注意，display: none会将元素完全从视图中移除，而不仅仅是隐藏它。 - cspolton

可见性使用（问题的主题）有不同的目的。 - Genaut

Answer 3

我使用这段代码来使用Jquery更改CSS可见性属性。在鼠标悬停在元素1上时，将更改元素2的可见性。

为同一元素编写了两个不同的脚本，以实现鼠标悬停-鼠标离开效果。

 <script>$(document).ready(function(){
 $(".element1").mouseover(function(){
     $(".element2").css("visibility","visible");
 });

});

         <script>$(document).ready(function(){
 $(".element1").mouseleave (function(){
     $(".element2").css("visibility","hidden");
 });

注意：Element2是被CSS影响的元素，原来是隐藏的。当鼠标悬停在Element1上时，Element2会显示出来。当鼠标离开element1时，Element2会再次隐藏。希望这能有所帮助。

-这段代码的经验是从堆栈溢出中的其他用户中研究和混合一些其他代码得来的。

- JasoBeam 777

Answer 4

$(':hidden').show();

希望这可以帮到你，也希望我理解了你的问题 :) http://api.jquery.com/show/

- Ives.me

Answer 5

尝试

$mySelection.show();

- rahul

---

不起作用；jQuery的show()方法设置"display" CSS属性，不影响"visibility"。 - Thomas W