如何给 JS(jQuery) 中的翻译添加加法赋值(+=)?

2024-02-13

我的期望是设置加法赋值运算符(+=/-=)到transform: translateX(),但不知道我该怎么做。

我尝试了一些方法来做到这一点:

$('.inline-grid').css({transform: 'translate(+= 4%, 0)'}) 
$('.inline-grid').css({transform: 'translate(''+=' + '4' + '%', 0')'})
$('.inline-grid').css({transform: "translate("+=" + "10" + "%", 0)"})
$('.inline-grid').css({transform: '+=' + 'translateX(4%)'})
$('.inline-grid').css({transform: '+=translateX(4%)'})

但这些都不起作用。

有什么方法可以给予+=运算符到translateX()?

Code:

function delay(callback) {
  let binding = callback.bind(this);
  setTimeout(binding, 400);
}
function action() {
  setInterval(() => {
    $('.inline-grid').css({
      transform: "translateX(10%)"
    })
    console.log(`waiting 400ms`);
  }, 1900);
}
delay(action);
    #element{
      position : relative;
      font-size: 3rem;
      font-family: Helvetica;
      display: flex;
      flex-flow: row;
      justify-content: center;
    }
    .inline-grid {
      position: relative;
      transform: translate(-10%, 0);
    }
    .transition {
      transition: all 1000ms cubic-bezier(.93,.01,.1,.98);
    }
    <div id="element">
      <div class="inline-grid transition">
        Bazil Leaves
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

根据@Rory 的提示,我制作了一个简单的模块来解决我的问题。我将这个简短的描述分享给那些在不久的将来遇到像我一样问题的人。

该模块的主要特点是无限累积。不太可能.css()jQuery中的方法,累加不受CSS的影响transition财产。

谢谢你的建议@RoryMcCrossan :-)

=========最新更新=========

现在用户可以积累任何类型的unit例如px, cm, rem, 甚至%.

见Github https://github.com/sniffingdoggo/Unlimited-Accumulation-Module

=========最新更新=========

此代码自 2019 年 8 月 11 日起已过时。

// @BUG FIXED
// @CHANGED THE CODE MORE CLEARER
// @USAGE: Operator.assemble(target, increment, property, unit);

const Operator = (function() {
  function Accumulate(init, acc, name, unit) {
    this.init = document.querySelector(init);
    this.acc = acc;
    this.name = name;
    this.unit = unit;
    this.convert(this.result);
  }
  Accumulate.prototype = {
    convert: function(callback) {
      let defaultDisplay = this.init.style.display;
      this.init.style.display = 'none';
      let bind = callback.bind(this),
          getValues = window.getComputedStyle(this.init, null).getPropertyValue(this.name),
          S2N = parseInt(getValues, 10);
      this.init.style.display = defaultDisplay;
      bind(S2N);
    },
    result: function(value) {
      let getNewValue = value + this.acc;
      this.init.style.left = getNewValue + this.unit;
    }
  }
  return {
    assemble: (init, acc, name, unit) => {
      new Accumulate(init, acc, name, unit);
    }
  }
}());

//==============================================

setInterval(() => {
  Operator.assemble('.content', 10, 'left', '%');
}, 1000);
  #box{
    max-width: 2560px;
    background-color: gold;
  }
  .content {
    left: 10%; /* 10px */
    position: relative;
    transition: 1000ms;
  }
<div id="box">
  <div class="content">
    wowtested
  </div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何给 JS(jQuery) 中的翻译添加加法赋值(+=)? 的相关文章

  • es6-module 默认导出导入为未定义

    我不确定我在这里缺少什么 我正在使用 jspm 和 es6 module loader 开发一个项目 我有一个模块定义如下 import hooks from hooks import api from api import tools f
  • 单击 btn 而不触发 div 单击未按预期工作

    代码沙盒 https codesandbox io s currying breeze depdc9 file package json https codesandbox io s currying breeze depdc9 file
  • 如何从 jquery .load 获取 php 响应

    例如我给出另一个代码 这是我的 some3 php 代码 第一个文件
  • FileReader 在 Ionic 2 中未触发 onloadend

    我正在尝试使用 cordova file plugin 读取本地文件 目前我可以读取本地目录的内容并选择单个文件 但我在获取文件内容时遇到问题 这是我的函数 从列表中选择文件后单击按钮即可调用该函数 import window resolv
  • 如何将值从孩子的孩子传递给父母?

    我有一个父组件 有一个子组件 它也有一个子组件 Parent Child One child of parent Child Two child of child 当在子二中定义一个值时 我使用回调将该值传递给子一 但我也想将相同的值传递回
  • Nodejs 异步 Promise 队列

    我需要使用速率受限的 API 例如 我一秒钟只能进行 10 个 API 调用 因此我需要等待当前秒结束才能进行另一个 API 调用 为了实现这一目标 我想创建一个可以自行管理的异步队列 它的主要功能是让我向队列添加一个新的 Promise
  • 复合组件和 CSS

    I have newcss css formdiv width 30 margin 150 auto 和复合组件
  • jPlayer 无法在 Firefox 中播放 mp3

    我正在集成 jplayer 来播放由使用 jQuery 的单击事件触发的精选 mp3 文件 用于实现此目的的代码是 play link click function jquery jplayer 1 jPlayer destroy srcF
  • Python 中的 Firebase 身份验证时出现 KeyError:“databaseURL”

    相信你做得很好 我是 firebase 的新手 正在尝试进行用户身份验证 我已经安装了pyrebase4并在firebase控制台上创建了一个项目 我还启用了使用 电子邮件和密码 登录并尝试连接我的应用程序 下面是我正在尝试的代码 impo
  • JavaScript 中的安全数据

    我必须为 Web 测试创建生成器 使用 HTML 和 JavaScript 测试必须离线和在线进行 正确答案和分数评估必须是生成的测试的一部分 最终用户的分数仅发送到服务器 无法在服务器上进行评估 并且服务器对问题一无所知 它只保存最终分数
  • 无需画布/显示器即可拍摄隐形 WebRTC/视频照片

    我读了拍摄静态照片 https developer mozilla org en US docs Web API WebRTC API Taking still photos来自 MDN 的描述如何从网络摄像头捕获照片 使用视频元素和med
  • 检查是否安装了 Google Analytics 或 Universal Analytics?

    我正在尝试通过 JavaScript 来确定是否加载了 Google Analytics 或 Universal Analytics 一些客户仍在使用旧的 Google Analytics 我们希望推出一个收集数据的 JavaScript
  • Woocommerce 中的 Ajaxify 标头购物车项目计数

    我正在为 WordPress 创建一个自定义 woocommerce 集成主题 我在顶部有一个 blob 显示购物车中的商品总数 我想使用 Jquery 更新此 blob 无需重新加载页面 我能够通过获取购物车中的当前数量来增加商品数量bl
  • 使用外部按钮选择下一个/上一个单选按钮

    我正在制作一种幻灯片形式 当用户单击下一张图像时 还必须选择单选按钮 我的滑动功能可以正常工作 下一个按钮 也可以工作 但我有点坚持使用 上一个 按钮 不明白为什么它不起作用 fiddle http jsfiddle net V4tdx 这
  • 鼠标输入时反应显示按钮

    我有一个反应组件 它包含如下方法 mouseEnter console log this is mouse enter render var album list const albums this props if albums user
  • Django - 渲染到字符串无法加载 CSS

    我正在尝试使用 Django 1 8 render to string 通过管理命令将 html 转换为 pdf 而不是使用 View request 以下代码可以将模板转换为 pdf 但它无法将 CSS 加载到模板中 def html t
  • 如何在 getStaticPaths 内添加 params 值数组

    我有一个页面 其结构如下 read slug number 我想要得到slug每个对应的值number in the getStaticPaths这是代码 export async function getStaticPaths const
  • JS - 如何将图像对象变成灰度并显示它

    基本上 当单击按钮时 它会告诉移动设备转到相机 一旦相机拍照 它就会给我图像数据 它被称为数据 URL 吗 这是我处理它的代码 var imagesrc data image jpeg base64 imageData var myimag
  • 从 node.js 创建对 AWS ES 实例的有效签名请求

    我试图找到一个示例 说明如何连接到 Node js 中的 AWS ES 实例 然后通过一个简单的请求访问 ES 集群 我正在尝试使用elasticsearch节点包 https www npmjs com package elasticse
  • 如何使用node.js获取屏幕分辨率

    我需要使用 node js 获取屏幕分辨率 但以下代码不起作用 var w screen width var h screen height 这也行不通 var w window screen width var h window scre

随机推荐