Jquery 每次相对于元素的当前位置平移元素？

我的目标是在每次单击按钮时，

100px

沿“X”轴平移框。通过在jQuery中使用

temp

变量，我以某种方式实现了这一点。 是否有其他方法可以完全通过CSS实现这一点，这样当单击按钮时，框应该从当前位置

转换
100px


var-temp=100；
$（文档）.ready（函数（）{
$（'#b1'）。单击（函数（）{
$（“#框一”）.css（“转换”、“转换”（+temp+“px，0px）”）；
温度=温度+100；
});
});
#第一框
{
背景颜色：蓝色；
高度：100px；
宽度：100px；
过渡：所有0.3秒缓解；
}

移动
让我们尝试使用来完成此任务

$(document).ready(function(){
    $('#b1').click(function(){
        $('#box-one').animate({
            "left":     "+=100px"
        }, "slow");
    });
});

我们需要稍微修改CSS。让我们去掉
transition
并添加
position
属性：

#box-one
{
    background-color: blue;
    height: 100px;
    width: 100px;
    position: relative;
}

我认为这个问题的答案是：不，你不能只使用CSS。。。或者可能只是“现在不行”

HTML和CSS是声明性语言，描述页面应该如何组织以及浏览器应该如何表示页面。但它们是“静态的”：它们不会改变，或者至少它们本身不会改变（因为它们可以通过使用JavaScript等脚本语言来改变）

因此，在您的特定情况下，每次单击按钮时，您都需要一种不同的语言来跟踪这些更改，并相应地应用一个操作（就像您当前使用JavaScript所做的那样）


我为什么说“现在不行”？因为CSS获得了一些使它稍微动态的特性，如果扩展（请注意，这只是我的梦想），它们可以帮助您实现您描述的东西，而不需要JavaScript

例如：
计数器重置
和
计数器增量
允许跟踪元素的出现次数，它们可用于
的
内容
：在
之前和
之后。如果它们被扩展，以便您可以在其他规则中使用它们（例如：作为数字值），并且如果它们不仅跟踪元素，而且跟踪选择器（例如：
：active
），则您可以在不使用JavaScript的情况下实现所需的功能。。。不过，这也是我的白日梦。
CSS不能完成onclick事件。但是在锚定标签上

这有点老套，但不知何故，我希望您能理解：）
您可以在
transform
属性上链接以空格分隔的转换值。您可以简单地读回应用的转换并将
translate（100px，0px）
添加到字符串中，以补偿默认的
none
值

工作示例：

$（文档）.ready（函数（）{
$（'#b1'）。单击（函数（）{
var transform=$（'框一'）.css（'转换'）；
$（“#框一”）.css（'transform'，（transform！='none'？transform:''）+'translate（100px，0px）'；
});
});
#第一框
{
背景颜色：蓝色；
高度：100px；
宽度：100px；
过渡：所有0.3秒缓解；
}

移动
这里是一个纯CSS方法，尽管它有点疯狂

根据需要添加更多输入（和相关CSS）：


html，正文{
保证金：0；
填充：0；
}
#方框一{
背景颜色：蓝色；
高度：100px；
宽度：100px；
过渡：所有0.3秒缓解；
}
输入[类型=复选框]{
位置：绝对位置；
不透明度：0；
变换：scaleX（7）scaleY（2）；
顶部：100px；
}
输入：类型{z-index:1；}的第一个
输入：选中{显示：无；}
输入：选中+输入{z-索引：1}
输入：选中：第n个子（1）~#框一{转换：translateX（100px）；}
输入：选中：第n个子项（2）~#框一{转换：translateX（200px）；}
输入：选中：第n个子（3）~#框一{转换：translateX（300px）；}
输入：选中：第n个子（4）~#框一{转换：translateX（400px）；}
输入：选中：第n个子（5）~#框一{转换：translateX（500px）；}
输入：选中：第n个子（6）~#框一{转换：translateX（600px）；}
输入：选中：第n个子（7）~#框一{转换：translateX（700px）；}
输入：选中：第n个子（8）~#框一{转换：translateX（800px）；}
输入：选中：第n个子项（9）~#框一{转换：translateX（900px）；}
输入：选中：第n个子项（10）~#框一{转换：translateX（1000px）；}

Move
我确实认为，仅使用CSST就可以实现这一点，这是一种纯粹的css方法--