Acoustic JS do animation to determine whether to reach the target value caused by the abrupt problem

Source: Internet
Author: User

Title, what do you mean?

$ (' #box '). Animate ({
Start:200,attr: ' Left ', step:13,alter:400 //increment})

This is the animated function that is written. Animate usage

The above starting value is 200, step 13, the target value is 200+400=600, then every time I exercise 13, then he only exercise to 590 and then exercise to 603 and then judge and re-assign to 600, abrupt it? Let's see how I got to the finish line.

if ((Step>0&&target<=parseint (GetStyle (element,attr))) | | (Step<0&&target>=parseint (GetStyle (element,attr)))) {element.style[attr]=target+ ' px '; clearinterval (timer);} Else{element.style[attr]=parseint (GetStyle (element,attr)) +step+ ' px ';}

This step only needs to pass a positive value, the function will automatically assign a positive or negative, if the step>0 is moving in the positive direction and the target value <= the current value then stop the animation and assign a new value, so it causes abrupt

And look at the improved

After the change: concise and useful AH if (Math.Abs (Target-parseint (GetStyle (element,attr))) <=math.abs (step)) {element.style[attr]= target+ ' px '; clearinterval (timer);} Else{element.style[attr]=parseint (GetStyle (element,attr)) +step+ ' px ';}

It is only necessary to determine if the Math.Abs (target value minus the current value) is less than or equal to Math.Abs (step) if it is set to stop so when I move to 590, it will enter this judgment and the next action is 600, not so stiff!

Acoustic JS do animation to determine whether to reach the target value caused by the abrupt problem

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.