What is the best way to adjust the sprite's position in real-time

Question

What is the best way to adjust the sprite's position in real-time

Look at this cool sprite I discovered!

.common-spinner.common-spinner-40x55 {
    height: 55px;
    width: 40px;
}

.common-spinner {
    background: url("images/loading-sprite.png") no-repeat scroll 100% 100% transparent;
}

<div class="loading">
<div class="common-spinner common-spinner-40x55" style="background-position: 0px 0px;"></div>
</div>

Has anyone figured out how to create a loading animation using this? I attempted to change the position in a for loop like this:

for(i=0; i<=720;) {
    $('.common-spinner').css('background-position', '-'+i+'px 0px');
    i=i+20;
}

However, there seems to be no animation. Could it be moving too quickly?

Any suggestions on how to make this work?

Best,

I have shared the code on jsfiddle with Erik Hesselink's solution

http://jsfiddle.net/X7tGb/

javascript jquery html css

Answer 1

Answer №1

In order to view the animation, it is necessary to exit the Javascript execution thread. This can be accomplished by implementing timeouts. Here is an example:

function adjustBackgroundPosition (pixels)
{
  return function ()
  {
    $('.common-spinner').css('background-position', '-' + pixels + 'px 0px');
    if (pixels < 720) setTimeout(adjustBackgroundPosition(pixels + 20), 100);
  }
}

setTimeout(adjustBackgroundPosition(0), 100);

Answer 2

In order to view the animation, it is necessary to exit the Javascript execution thread. This can be accomplished by implementing timeouts. Here is an example:

function adjustBackgroundPosition (pixels)
{
  return function ()
  {
    $('.common-spinner').css('background-position', '-' + pixels + 'px 0px');
    if (pixels < 720) setTimeout(adjustBackgroundPosition(pixels + 20), 100);
  }
}

setTimeout(adjustBackgroundPosition(0), 100);

Answer 3

Answer №2

http://example.com/jquery-sprite-animation/

If you're interested in JavaScript sprite animation, consider searching on Google as there are numerous resources available. The link above is just one example with a live demo.

Answer 4

http://example.com/jquery-sprite-animation/

If you're interested in JavaScript sprite animation, consider searching on Google as there are numerous resources available. The link above is just one example with a live demo.

What is the best way to adjust the sprite's position in real-time

Answer №1

Answer №2

Similar questions

``There seems to be a problem with the ngb time picker when using the up and

Effortlessly Transform HTML into Plain Text Using jQuery

Troubles with creating promises in Node.js

Error encountered: The module '@mui/x-data-grid' does not export 'GridActionsCellItem'

Difficulty encountered with fetching results using jQuery autocomplete with AJAX as the data source

Refresh text displayed on a button with the help of setInterval

What is the best way to make translateX transition function in Firefox?

Tips for eliminating the entire link from the footer section

Exploring the world of BDD with Node.js and Angular in an actual web

encountering a Zend Framework error

Creating CSS styles for fluid width divs with equal height and background images

When using the table-layout=fixed attribute in IE7, if one column does not have a specified width property, the table's width will

Retrieve a variety of items and pass them to a view using the mssql module in Node

The Node.js application successfully receives an emit event from the browser, however, the browser does not receive any emit

Preventing redirection post-AJAX call using jQuery

Modify the shading of the mesh generated with the face3 method

BeginForm in MVC: When Data Doesn't Get Posted

Having trouble getting $compile to work in an injected cshtml file with Angular

Using the previous page button will cause the current page button to have various states

ISP Blocks Flash Access