jQuery Animate：回调调用两次

Question

I'm triggering a set of animations when an user scrolls down on a website (using afterMove callback from onepage-scroll ) and, when animating some elements, unexpectedly, the same function is called multiple times.

Using this, I don't have a problem:

base = $('section[data-index="' + index + '"]');
base.find('h1').animate({opacity: 0.1}, 3000);
console.log('Finished #' + index);

And I have the correct output on console after moving to section #3.

Finished #2
Finished #3

But when I try to use a form, for instance,

base.find('#my-form-id').animate({opacity: 0.1}, 3000);

this is the output:

Finished #2
Finished #3
Finished #2
Finished #3

The last two logs are registered only when the animation ends.

What's resulting this behaviour?

Answer 1

Actually, I was searching in the wrong place.

The real problem was that I was styling the element with a CSS3 opacity transition. When I tried to apply any other action to the same element which would use the same attributes, I had this issue.

It seems that they doesn't play nicely together.