Preventing jQuery from using Scientific Notation in $.Animate()?

问题

How am I able to prevent jQuery from using scientific notation - 1.2e+07 instead of 12,000,000 within the jQuery.animate() function?

Using: $('body').css({ backgroundPositionX: 12000000 + 'px' });

Converts to: background-position-x: 1.2e+07px;

Desired results: background-position-x: 12000000px;

This starts occuring as soon as the number hits 1 million (1,000,000):

This, in turn, causes my application to behave strangely. I want pure, simple integer numbers -- none of this scientific nonsense! I've looked around but I cannot find anything related to the jQuery library. Only pure JS functions.

Note 1: It's not just animate, but $.css() as well. I assume other jQuery functions are similar also.

Note 2: I don't think it's the browser that does it because if I enter the value in manually it works just fine until you hit the usual max 32 bit integer

Why is this a problem:

12000321 converts to: 1.20003e+07

When I then convert 1.20003e+07 back to an integer I get: 12000300

When you get to Scientific Notation, the step size is in the 100s & not 1s and not specific enough.

Thank you for considering my question

回答1:

Wow... took me a long time but I finally managed to work out a way of doing this.

After lots of testing I noticed that passing a direct string to $.attr() did not convert the numbers to the scientific notation.

I created a custom animation and manually set the style attribute as a string.

Seems to be working & going up in single digits not 100s!!

$({
    x: this.x,
    y: this.y
}).animate({
    x: x,
    y: y
}, {
    easing: this.motion_type,
    duration: this.duration,
    step: function(now, fx) {

        var current_styles = $('.area').attr('style'),
            current_styles = string = current_styles.split(" ");

        var x = parseFloat(current_styles[1].replace('px', '').replace(';', ''));
        var y = parseFloat(current_styles[2].replace('px', '').replace(';', ''));

        if ('x' === fx.prop) {
            x = now;
        } else if ('y' === fx.prop) {
            y = now;
        }

        $('.area').attr({ style: 'background-position: ' + x + 'px ' + y + 'px;' });

    },
    complete: function() {
        t.stopNow();
    }
});

来源：https://stackoverflow.com/questions/53892540/preventing-jquery-from-using-scientific-notation-in-animate

标签

javascript

jquery

notation