通过 jQuery.Keyframes 使用存储在变量中的值答案

【问题标题】：Use values stored in variables with jQuery.Keyframes通过 jQuery.Keyframes 使用存储在变量中的值
【发布时间】：2021-12-29 12:16:54
【问题描述】：

我想使用 jQuery 更改我的动画，发现这很有帮助 tutorial。这行得通 -

 $.keyframe.define([{
     name: 'slidein',
           
        from:   {'margin-left': '100%'},
        to:   {'margin-left': '10%'}
       }]);

但我不想提供一个固定的百分比或 px 值，而是想使用一个变量，其中存储了一个 px 或百分比值。我已经尝试了以下所有方法，但都没有成功

   // to:   {'margin-left': bigSlide.width}
   // to:   {'margin-left': 'bigSlide.width'}
   // to:   {'margin-left': calc(bigSlide.width)}
   // to:   {'margin-left': 'calc(bigSlide.width)'}
   // to:   {'margin-left': (100px+630px)}
   // to:   {'margin-left': calc(100px+630px)},
   // to:   {'margin-left':'calc(100vw - 800px)'}

}]);

我尝试了诸如 calc(100px+630px) 之类的选项来看看我是否可以让 calc 工作。

【问题讨论】：

标签： html jquery css-animations jquery-animate keyframe

【解决方案1】：

您需要在表单中添加一个值 - 到：{'margin-left': bigSlide.width + 'px'}。使用串联。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

尝试将变量包装在模板文字中，如下所示：

\`${variableName}\`

这将使它读取为一个字符串，无论变量中的值是什么。

【讨论】：

【解决方案3】：

感谢 Maxim G 的上述建议。我得到了这个解决方案。

$.keyframe.define([{
      name: 'slidein',
    
      from:   {'margin-left': '100%'},
      to:   {'margin-left':bigSlide.width + bigSlide.getBoundingClientRect().left+'px'}

    }])

【讨论】：