ansaurus

Question

How to animate button text? (loading type of animation) - jquery?

Answer 1

+1 A:

Set up a timer with javascript, that will run until the process is done, be sure to have a flag for it.

And since you are using jQuery, you can simply $("#button-id").val(nextStep); where nextStep is the next animation string. Example:

function putAnimation () {
    var b = [".", "..", "..." ];
    var i = 0;

    var a = setInterval(function () {
        $("#button-id").val("SUBMIT " + b[i++]);

        if (stopped) {
            $("#button-id").val("SUBMIT");
            clearInterval(a);
        }
    }, 500);
}

Francisco Soto 2010-04-30 08:39:19

Answer 2

A:

For the animation itself:

$('#submit').click(function() {
  $(this).val("Submit    ").delay(200).val("Submit .").delay(200).val("Submit ..").delay(200).val("Submit ...").delay(200).val("Submit").delay(200);
});

Tim 2010-04-30 08:43:43

i can tell using `delay()` like this won't work.... :)

Reigel 2010-04-30 08:47:26

Why not? It's worked for me before

Tim 2010-04-30 09:21:13

Answer 3

A:

Hi all,

Thanks for all your replies.

I have tried this but need some guidance whether this is the correct way to do it?

<?php

$process = new process;
if (isset($_POST['submit']) && $_POST['submit'] == "SUBMIT") {
    $process->run_now();
}
?>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test form</title>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
<script type="text/javascript">                                         
    $(document).ready(function() {

        $('#submit').click(function() {
            putAnimation();
        });

        function putAnimation () {
            var b = [".", "..", "..." ];
            var i = 0;

            var a = setInterval(function () {
                $("#submit").val("SUBMIT " + b[i++]);

                if (stopped) {
                    $("#submit").val("SUBMIT");
                    clearInterval(a);
                }
            }, 500);
        }

    });
 </script>

</head>

<body>
<div id="main">
  <form action="" method=POST>
    <input type="submit" class="forum-button1" value="SUBMIT" id="submit" name="submit" /> 
  </form>
</div>  
</body>
</html>

Basically "run_now" is the function in the class that I would like to run after clicking submit button. This function will take some times to process and I would like the button to animate with dots while waiting for the function to finish the process. Once the process is done, the button will stop the animation.

Have I done it correctly?

Thanks.

AL 2010-04-30 14:43:28

ansaurus

tags:

views:

answers:

How to animate button text? (loading type of animation) - jquery?

related questions