CODEWITHSUNDEEP
javascriptjquerycssevents
Ozzy
Ozzy

Reputation: 10643

jQuery event that fires on css change

I am using the .animate method to move a div 100px to the right over 1 second.

So thats 1px every 10ms. Is there an event that would fire after every pixel movement? Or even an event that fires after every 10-20px of movement?

The example above is a simple one, what i will use it for is to track the left: property of multiple elements and work out when to display them only if they are in the visible bounds of the browser.

Upvotes: 3

Views: 437

Answers (2)

Caspar Kleijne
Caspar Kleijne

Reputation: 21864

the step function in animate is what you need (you have to scroll a bit down for that)

The second version of .animate() provides a step option — a callback function that is fired at each step of the animation. This function is useful for enabling custom animation types or altering the animation as it is occurring. It accepts two arguments (now and fx), and this is set to the DOM element being animated.

$(something).animate({
  ..... settings...
},
{
  {
  step: function(now, fx) {
    // where your code goes
  }
});

Upvotes: 3

Connor Smith
Connor Smith

Reputation: 1314

Did you even read the API for animate()?

Examples of using step here:

http://www.bennadel.com/blog/1856-Using-jQuery-s-Animate-Step-Callback-Function-To-Create-Custom-Animations.htm

http://james.padolsey.com/javascript/fun-with-jquerys-animate/

Upvotes: 0

Related Questions