admin 管理员组

文章数量: 1184232

It looks like callback function is executed right after animate is called, not at the end of the duration which that animate is set to. And it looks like it does not matter where the function is executed within or referenced.

is there a way to specify to fire up callback function at the end of duration, or i need to initiate a timer which would be set to the same value as the duration of the animation?

another thing, hypothetically, i would like same function to animate either fade in or fade out depending on css property value, the only thing that holds the entire idea smoothly going through is the fact that i can not invoke same animate on the element while animate is running. Any way to stop execution of the animate?

So far nothing in documentation, wondering if anyone had same problem and how you solved it.

Thank you in advance.

It looks like callback function is executed right after animate is called, not at the end of the duration which that animate is set to. And it looks like it does not matter where the function is executed within or referenced.

is there a way to specify to fire up callback function at the end of duration, or i need to initiate a timer which would be set to the same value as the duration of the animation?

another thing, hypothetically, i would like same function to animate either fade in or fade out depending on css property value, the only thing that holds the entire idea smoothly going through is the fact that i can not invoke same animate on the element while animate is running. Any way to stop execution of the animate?

So far nothing in documentation, wondering if anyone had same problem and how you solved it.

Thank you in advance.

  • javascript
  • jquery
Share Improve this question asked Nov 27, 2009 at 22:27 GnrlBzikGnrlBzik 3,3605 gold badges29 silver badges37 bronze badges 2
  • 2 Why the downvote? This is a question, even if he's wrong that does not mean he deserve a downvote. That's the reason he is asking. +1 from me to balance until I'm convinced otherwise. – the_drow Commented Nov 27, 2009 at 22:42
  • 2 My guess if that you're inadvertently executing the function when you think you're passing it to animate() – James Commented Nov 27, 2009 at 22:48
Add a ment  | 

1 Answer 1

Reset to default 11

Sorry, but your looks like statements are false: the callback executes only after the event is pleted.

From the jQuery documentation for the callback parameter:

A function to be executed whenever the animation pletes, executes once for each element animated against.

Source

Try the following code on your puter. If this doesn't convince you that the docs are right, then I don't know what will.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3/1999/xhtml">
  <head>
    <title>jQuery Animate, Callback Test</title>
  </head>
  <body>
    <script type="text/javascript"
      src="http://ajax.googleapis./ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
        $('<div id="mytest">Ining!</div>')
          .appendTo(document.body)
          .css('font-size', '14px')
          .animate({ fontSize: '42px' }, 1500, 'linear', function() {
            $(this).text('Boom!').css('color', 'red');
          });
      });
    </script>
  </body>
</html>

The text will get bigger, then say "boom!" and turn red when the animation is plete.

The animation will proceed without stopping by default because there is a queue. A queue is simply a list of pending animations that jQuery cycles through until it is empty. To forgo the queue, you need to use one of the overloaded versions of animate:

$(this).animate({
  opacity: 1.0,
  width: '234px'
}, {
  queue: false, // This skips the queue
  duration: 'fast',
  plete: function() { alert('the callback'); } // Your callback goes here...
});

Also, named functions must be passed without the parenthesis (the surrounding curly marks of this fragment) or else the function will be executed.

var temp = myFunc(); // gets called and the result is assigned...
var temp = myFunc;   // but this doesn't get called, and the function is passed.

本文标签： javascriptjQuery animate( params duration easing callback )Stack Overflow

版权声明：本文标题：javascript - jQuery: animate( params, [duration], [easing], [callback] ) - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1741376029a2292534.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。