feat(pauseResume): pause/resume feature(jQuery plugin)

[jongmoon]

Issue

#111

Details

jQuery Animate - pause/resume plugin feature

Preferred reviewers

@naver/egjs-dev

[mixed]

Can you remove console comments?

[jongmoon]

Sure! I'm now cleaning the code and adding useful comments at the code.

[mixed]

I have reviewed.

[sculove]

you'd better use jQuery.now()
http://api.jquery.com/jquery.now/

[jongmoon]

@sculove Wow! Good!

[sculove]

I propose paused selector like this.
https://github.com/jquery/jquery/blob/master/src/effects/animatedSelector.js#L7

[mixed]

computed is always undefined. Why does it check?

[jongmoon]

If prop has a more than one property, then computed can be used.

For example, prop has below.

prop = {
  left: "+=100px",
  width: "+=100px",
  height: "+=100px"
}

Without computed, below code can call getStyles 3 times in above case.

var computed;
for (var propName in prop) {
  //...
  if (!prevProp[propName]) {
    computed = computed || getStyles(el);
    //...
  }
  //...
}

[mixed]

Ah.. Sorry. I didn`t find for loop. :)

[sculove]

LGTM

[mixed]

Why didn't you use jQuery method? I think that It didn't working including dash style.(like background-color)

[jongmoon]

@mixed
I considered to use jQuery method and I found that getStyle function is implemented as a local function. So I looked for external function that wraps the getStyle. But I couldn't find.

I found 2 use cases of getStyle on external function.

1. $.cssHooks["height" | "width"].set = function() {}
2. $.fn.css

First one is not correspond with purpose,
Second one needs property name to get specific value.

Can you help me to find the substitution for the above code? :)

And I can't understand the situation where dash style is included. Do you mean that getComputedStyle can return dash-style value? or element can have dash-style value (So it cannot be obtained through getComputedStyle)

[mixed]

• When use animate in IE8(link) that Including dash style(like padding-left) didn`t working.
• It have performance issue using getComputedStyle. But If You don't change DOM It haven't issue.

[jongmoon]

@mixed Thank you for your kindness. And I applied your reviews. As you tell me, I tested that While a DOM element is not changing, the getComputedStyle makes tiny performance issue which we don't have to worry. I think Changing from caching the getComputed value as a computed variable to $.css will be OK.

But I want to emphasize other BIG differences on this commit.

I changed the time to calculate absolute value from relative value and the way to get previous value.

BEFORE

1. calculation time: on animate call time
2. way to get previous value: cached value each calculated on animate call time.

AFTER

1. calculation time: on animate complete time
2. way to get previous value: call $.css when current value is relative.

Problems that 'BEFORE' had is below.

CSS value can be changed between before animation is done like below.

this.$el
  .animate({"left": "100px"}, duration, function() {
  /**
   * This makes an changes.
   */
    $.style(this, "left", 0);
  })
  .animate({"left": "+=100px"});//MUST move left value based on 0.

Code above does not act on BEFORE pause/resume code. because Next animation refers to the value that is not applied custom changes(like on complete, step, progress)

[mixed]

@jongmoon
I got it. LGTM!