jQuery show 和 fadeIn 函数不起作用答案

【问题标题】：jQuery show and fadeIn functions not workingjQuery show 和 fadeIn 函数不起作用
【发布时间】：2013-03-04 13:41:51
【问题描述】：

我正在使用一些基本的 jquery 函数，例如 show 和 fadeIn，但是它们不起作用。你能看出我做错了什么吗？我知道正在处理脚本，因为我看到控制台中打印了“It works”。

脚本

$(document).ready(function(){
$('#submit').on("click",function(e){
    e.preventDefault();
    console.log("It works");
    $("#username-triangle").show('slow');
    $("#username-error").fadeIn(500);
    $("#password-triangle").fadeIn(500);
    $("#password-error").fadeIn(500);
    $("#form input").addClass("error-glow");

});
});

html的一部分

 <div class="login-form">
             <div class="username-triangle" id="username-triangle"><img src="img/triangle.png"></div><!--username-triangle -->
             <div class="error username-err" id="username-error">
                 <img src="img/error.png">
                 <p>Wrong Username</p>
             </div><!--end error username-err -->
             <div class="password-triangle" id="password-triangle"><img src="img/triangle.png"></div><!--end password-triangle -->
             <div class="error password-err" id="password-error">
                 <img src="img/error.png">
                 <p>Wrong Password</p>
             </div><!--end error passsword-err -->

元素的可见性设置为隐藏的 css 的一部分。

.username-err
{
visibility: hidden;
position:absolute;
margin-top: 64px;
margin-left: 310px;
}
.username-triangle
{
visibility: hidden;
margin-top: 70px;
margin-left: 299px;
position: absolute;
z-index: 3;
}

【问题讨论】：

现在试试我编辑的代码。它一定会给你你想要的。

标签： javascript jquery html css visibility

【解决方案1】：

你可以使用display:none，而不是在你的css类中使用visibility: hidden;。

删除 visibility:hidden 并在您的 CSS 中使用 display:block。

还有

替换

$('#submit').on("click",function(e){

有

$('#submit').click(function(e){

【讨论】：

可见性和不透明度属性不会被 jQuery 的 show() 和 hide() 方法修改。