CODEWITHSUNDEEP
javascriptjqueryhtmlfadein
Or Amranov
Or Amranov

Reputation: 47

fadeIn on a button click

I have a problem in my code. I am trying to display a loading animation(that i have at .gif format). The only problem is that when ever I click the button the animation is being displayed for less than one second and it disappears. What am I doing wrong?

HTML:

<form action="" method="post">
 <button id="act">Click me</button>
</form>
<div class="loading"></div><!--my Animation-->

Jquery:

   $(function() {
    $(".loading").css("display","none");
    $("#act").click(function() {
         $(".loading").fadeIn("slow");
    });

   });

Thank you!

Upvotes: 0

Views: 148

Answers (6)

user2550807
user2550807

Reputation: 90

Though the JQuery solutions are very simple, I would look into CSS3 animations. They are much smoother than the built in fadein functionality.

Upvotes: 0

Sevag Akelian
Sevag Akelian

Reputation: 231

add an inline display:none; style for the .loading element and remove the css("display","none") from the function

Upvotes: 0

Delrog
Delrog

Reputation: 765

I'm not entirely sure but I think the display,none is giving you trouble. Rather hard code this into the css and have it as $(".loading").show() or hide() whenever necessary. First click show and then you can choose when to hide and when to show manually. More flexible.

Upvotes: 1

Sathya
Sathya

Reputation: 5308

change like this.

$("#act").click(function() {
$(".loading").css("display", "block").css("opacity", "0");
$(".loading").fadeIn("slow");
});

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

you can use miliseconds for fadeIn directly

$(".loading").fadeIn(2000);// this will fadin in 2 seconds

Upvotes: 0

Skatox
Skatox

Reputation: 4284

You'll stop the default action for the sumbit button (submiting the form), you'll need add the e parameter to the function and stop the default action.

 $(function() {
    $(".loading").css("display","none");
    $("#act").click(function(e) {
         e.preventDefault(); //This will stop it.
         $(".loading").fadeIn("slow");
    });

   });

Upvotes: 2

Related Questions