CODEWITHSUNDEEP
phpjavascriptjqueryformssubmit
user2091820
user2091820

Reputation: 1

Hiding/Return send button with a fade effect on click

I would like to make my button disappear for 2 secondes by fading out and then re-appear after 2 secondes by fading in.

Does anyone know how to make that with javascript and CSS? I am not a good expert a JS.

Upvotes: 0

Views: 1067

Answers (3)

skrilled
skrilled

Reputation: 5371

To do an onclick functionality and keep it all in javascript code:

<input id='button' value='Button Text'>
<script language='javascript'>
$(function() {
  $('#button').click(function(){
    $(this).fadeOut('slow',function() {
      setTimeout('$(this).fadeIn("slow");',2000);
    });
  });
});
</script>

edit: You should probably disable the button instead of a simple fadeIn/Out - at the company I work for we just change the text out for "Processing" and users cannot reclick the button period (it doesn't come back).

Upvotes: 0

Sites Done Right
Sites Done Right

Reputation: 652

This will fadeout the button slowly, then when it's done fading out, it will wait 2 seconds before fading it back in again. Please note that this NOT an effective method for preventing spam. Although the button is "hidden" for 2 seconds, it doesn't really deactivate the form. If a spammer used an automated program to fill out the form and submit it, have the button styled to be hidden won't prevent this. But as a proof, feel free to use the code below.

<input id="submitBtn" type="submit" value="Submit my form!"/>
<script type="text/javascript">
    $("#submitBtn").fadeOut('slow',function(){
        setTimeout('$("#submitBtn").fadeIn("slow");',2000);
    });
</script>

Upvotes: 0

Green Black
Green Black

Reputation: 5084

This will do what you want, but dont expect it t solve any spam problems:

<input type='submit' onclick='$(this).fadeOut().delay(2000).fadeIn()'/>

Upvotes: 3

Related Questions