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

Posted

技术标签:

【中文标题】通过 jQuery.Keyframes 使用存储在变量中的值【英文标题】:Use values stored in variables with 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 工作。

【问题讨论】:

【参考方案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'

    ])

【讨论】:

以上是关于通过 jQuery.Keyframes 使用存储在变量中的值的主要内容,如果未能解决你的问题,请参考以下文章

对象存储可以通过哪些方式使用?

如何通过 phpMyAdmin 界面使用存储过程

通过终端查看 MySQL 数据库使用啥存储引擎

为啥不能配置 Azure 诊断以通过新的 Azure 门户使用 Azure 表存储?

通过应用更新使用本地存储进行应用内购买

如何使用云功能通过签名下载地址删除存储图像?