如何使用 jquery 为嵌套元素设置动画？答案

【问题标题】：how do I animate a nested element with jquery?如何使用 jquery 为嵌套元素设置动画？
【发布时间】：2013-06-17 06:23:40
【问题描述】：

如何使用 jquery 为嵌套元素设置动画？我一直在尝试使用 jquery 使表格可见几个小时，但它不起作用。被注释掉的

//document.getElementById("passwordCon").style.visibility="visible";

工作得很好，但我想为它制作动画。怎么了！！！我尝试使用动画功能和可见性：可见但没有任何效果。 id 是对表 id 的引用。

编辑：表格的 html 样式属性是可见性：隐藏。我想通过 jquery 和动画显示表格。

javascript

$(document).ready(function(){
    $("#username").keyup(function(){
        $.post("tryUser.php",
        {
           name:$(this).serialize()
        },
        function(data){
            if(data == "no")
            {   
                //document.getElementById("passwordCon").style.visibility="visible";
                $("#passwordCon").fadeIn(500);
            }
            else 
            {                    
                document.getElementById("passwordConfTitle").style.visibility="hidden";
                document.getElementById("passwordCon").style.visibility="hidden";
            }
        });
   });
});

【问题讨论】：

标签： jquery animation selector

【解决方案1】：

尝试使用隐藏：

  $("#passwordCon").hide(1000);

您可以查看示例代码：

http://w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_slow

http://w3schools.com/jquery/jquery_hide_show.asp

【讨论】：

【解决方案2】：

我认为visibility: hidden 不支持fadeIn

演示：Fiddle

一种可能的解决方法是使用不透明度

$('#test').css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, 500)

演示：Fiddle

【讨论】：

【解决方案3】：

尝试：

$("#passwordCon").hide().fadeIn(500);

【讨论】：

忘了说了，默认是隐藏的。
它是如何隐藏的？如果它是可见性的：隐藏的@Arun P Johny 是正确的，你必须使用他的答案。或删除可见性属性并使用我的。
我把它隐藏了。除非用户名与我的数据库中的任何用户都不匹配，否则我不希望出现“确认密码”。因此需要使其可见。
没有办法直接为可见性设置动画吗？