Simple SQL to PHP Number increment Animation [Jquery]

Question

Am using this code to display the result of my SQL Table Columns

But I want some kind of animation increment effect before displaying the value of the column.

For example, if the table column has a value of 100 Then before displaying 100, I want it fast increment effect going on from 1 up to 100.

If the table column has a value of 20 Then before displaying 20, I want it fast increment effect going on from 1 up to 20.

<?php
/* Attempt MySQL server connection. Assuming you are running MySQL 
server with default setting (user 'root' with no password) */ 
$link = mysqli_connect("localhost", "root", "", "demo"); 

// Check connection 
if($link === false){ 
die("ERROR: Could not connect. " . mysqli_connect_error()); 
} 

// Attempt select query execution 
$sql = "SELECT * FROM test"; 
if($result = mysqli_query($link, $sql)){ 
if(mysqli_num_rows($result) > 0){ 
echo "<table>"; 
echo "<tr>"; 

echo "<th>results</th>"; 

echo "</tr>"; 
while($row = mysqli_fetch_array($result)){ 
echo "<tr>"; 

echo "<td>" . $row['my_column'] . "</td>"; 

echo "</tr>"; 
} 
echo "</table>"; 
// Free result set 
mysqli_free_result($result); 
} else{ 
echo "No records matching your query were found."; 
} 
} else{ 
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link); 
} 

// Close connection 
mysqli_close($link); 
?>

After a long google search, I came to know it can be done my jquery but am very new to jquery but still found this code

// Animate the element's value from x to y:
$({someValue: 40000}).animate({someValue: 45000}, {
duration: 3000,
easing:'swing', // can be anything
step: function() { // called on every step
// Update the element's text with rounded-up value:
$('#el').text(commaSeparateNumber(Math.round(this.someValue)));
}
});

function commaSeparateNumber(val){
while (/(\d+)(\d{3})/.test(val.toString())){
val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
}
return val;
}`

now the problem is how to insert SQL value to this line $({someValue: 40000}).animate({someValue: 45000}, {

Can you please help

I think I understand what you need. Is your animation working the way you want it? — Anadi Sharma
– Anadi Sharma, Commented May 28, 2018 at 18:23

Victoria Ruiz · Accepted Answer · 2018-05-28 21:40:03Z

I'm not sure where you want to display the animated value in HTML, so I can't provide the exact code. But what you want to do is insert the value in the HTML, not the JS.

Say you want the number in a div to grow from 0 to 1000. You can do:

<div class="needs-to-grow" data-end="1000">0</div>

then you use JS to look up the value in data-end, and you go from there:

$({someValue: 0}).stop(true).animate({someValue: $(".needs-to-grow").data("end")}

A full working fiddle can be found here:

   $({someValue: 0}).stop(true).animate({someValue: $(".needs-to-grow").data("end")}, {
        duration : 2000,
        easing: "swing",
        step: function () {  
            var displayVal = Math.round(this.someValue);
            $(".needs-to-grow").text(displayVal);
        }
    }).promise().done(function () {
        $(".needs-to-grow").text($(".needs-to-grow").data("end"));
    });

.needs-to-grow {
  font-size: 18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="needs-to-grow" data-end="1000">0</div>

Collectives™ on Stack Overflow

Simple SQL to PHP Number increment Animation [Jquery]

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related