Javascript 动画值作为百分比答案

【问题标题】：Javascript Animate Values as PercentagesJavascript 动画值作为百分比
【发布时间】：2015-05-06 16:53:20
【问题描述】：

我有一个我继承的客户端项目，它使用 javascript 创建各种动画效果，同时用户向下滚动浏览网站（有点像视差网站）。

它的问题是它改变了像素值，而我们现在想要它做的是用户百分比。

例如，当用户向下滚动 1800 像素时，此代码通过将其宽度从 0 增加到 750 像素，将 #location-left div 从左侧引入。它以 200 像素的间隔执行此操作。它通过将内联 CSS 写入 DIV 标记来实现这一点。：

{
                    selector: '#location-left',
                    startAt: 1800,
                    endAt: 2000,
                    onEndAnimate:function( anim ) {},
                    keyframes: [
                        { 
                            position: 0,
                            properties: {
                                "top" : 0,
                                "width" :  0
                            }

                        },
                        {
                            position: 1,
                            properties: {
                                "top" : 0,
                                "width" : 750
                            }
                        }
                    ]
                }

相反，我希望它从 0% 变为 50%。我最初的想法是计算一组 var 标签：

var a = $(document).width();
var a3= Math.floor(a * 0.3);  // 30% 
var a5= Math.floor(a * 0.5);  // 50%
var a8= Math.floor(a * 0.8);  // 80%
etc.

不过，在我从那个兔子洞走得太远之前，我想看看是否有一种我刚刚错过的更简单的方法。

【问题讨论】：

标签： javascript jquery responsive-design vertical-scrolling

【解决方案1】：

见this question。您可以将百分比放在引号中，例如：

{ 
    position: 0,
        properties: {
            "top" : "10%",
            "width" :  "30%"
        }

 },

【讨论】：

这并不真正起作用，原因有几个。它必须是一个数值才能在起点和终点之间设置动画。
对不起，我在想百分比会计算成一个数值，然后动画到更高的百分比（作为一个数值）。在这种情况下，也许你的方法是最好的。我不确定你还能在这里做什么。