CODEWITHSUNDEEP
javascriptjqueryhtmlcssvisibility
Joel Dean
Joel Dean

Reputation: 2454

jQuery show and fadeIn functions not working

I am using some basic jquery functions such as show and fadeIn however they wont work. Can you see what I am doing wrong? I know that the script is being processed becaue I see the "It works" being printed in the console.

script

$(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");

});
});

A portion of the 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 -->

A portion of the css with the visibility of the elements set to hidden.

.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;
}

Upvotes: 2

Views: 783

Answers (1)

Devang Rathod
Devang Rathod

Reputation: 6736

Instead of using visibility: hidden; in your css class, you can use display:none.

Remove visibility:hidden and use display:block in your css.

And also

Replace

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

With

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

Upvotes: 4

Related Questions