Javascript 如何使用Jquery制作从左到右的填充动画

我有一个带有这个代码的按钮

$（“body”）。在（'mouseover'，'上。注册按钮'，函数（事件）{
$（this.toggleClass（'before_bttn'）；
});
。注册按钮{
-webkit过渡：.3s缓解；
-moz转换：.3s放松；
-ms转换：.3s缓解；
-o-转变：.3s缓解；
过渡：放松；
字号：21px；
字体系列：Zona；
颜色：白烟；
边界：0；
位置：相对位置；
顶部：50px；
高度：50px；
左：120px；
字母间距：1px；
背景：#1ed5a3；
光标：指针；
宽度：140px；
溢出：隐藏；
z指数：1；
}
.在……之前{
内容：“；
背景#49d6a7；
排名：0；
右：100%；
底部：0；
z指数：-1；
位置：绝对位置；
左：0；
-webkit过渡：对。3秒轻松；
}
.before_bttn:悬停：before{
右：0；
颜色：白色；
}

注册
也许没有jquery你会更好，在css中使用transition移动div更容易：


$（'.sign\u button'）。一个（'mouseover'，函数（事件）{
$（'body'）.append（'您不需要jquery'）；
});
。注册按钮{
-webkit过渡：.3s缓解；
-moz转换：.3s放松；
-ms转换：.3s缓解；
-o-转变：.3s缓解；
过渡：放松；
字号：21px；
字体系列：Zona；
颜色：白烟；
边界：0；
位置：相对位置；
顶部：50px；
高度：50px；
左：120px；
字母间距：1px；
背景：#1ed5a3；
光标：指针；
宽度：140px；
溢出：隐藏；
z指数：1；
}
.注册按钮：在{
内容：“；
背景：红色；
排名：0；
右：100%；
底部：0；
z指数：-1；
位置：绝对位置；
左：0；
-webkit过渡：对。3秒轻松；
}
.注册按钮：悬停：之前{
右：0；
颜色：白色；
}

注册
也许没有jquery会更好，在css中使用transition移动div更容易：


$（'.sign\u button'）。一个（'mouseover'，函数（事件）{
$（'body'）.append（'您不需要jquery'）；
});
。注册按钮{
-webkit过渡：.3s缓解；
-moz转换：.3s放松；
-ms转换：.3s缓解；
-o-转变：.3s缓解；
过渡：放松；
字号：21px；
字体系列：Zona；
颜色：白烟；
边界：0；
位置：相对位置；
顶部：50px；
高度：50px；
左：120px；
字母间距：1px；
背景：#1ed5a3；
光标：指针；
宽度：140px；
溢出：隐藏；
z指数：1；
}
.注册按钮：在{
内容：“；
背景：红色；
排名：0；
右：100%；
底部：0；
z指数：-1；
位置：绝对位置；
左：0；
-webkit过渡：对。3秒轻松；
}
.注册按钮：悬停：之前{
右：0；
颜色：白色；
}

注册
您不需要在按钮中添加其他类，因此请删除JS代码。它现在起作用了，希望这就是你想要的

只需将
.before\u bttn
类重命名为
.sign\u按钮
类即可

希望有帮助


。注册按钮{
-webkit过渡：.3s缓解；
-moz转换：.3s放松；
-ms转换：.3s缓解；
-o-转变：.3s缓解；
过渡：放松；
字号：21px；
字体系列：Zona；
颜色：白烟；
边界：0；
位置：相对位置；
顶部：50px；
高度：50px；
左：120px；
字母间距：1px；
背景：#1ed5a3；
光标：指针；
宽度：140px；
溢出：隐藏；
z指数：1；
}
.注册按钮：在{
内容：“；
背景#49d6a7；
排名：0；
右：100%；
底部：0；
z指数：-1；
位置：绝对位置；
左：0；
过渡：对。3秒放松；
-webkit过渡：对。3秒轻松；
}
.注册按钮：悬停：之前{
右：0；
颜色：白色；
}

注册
您不需要在按钮中添加其他类，因此请删除JS代码。它现在起作用了，希望这就是你想要的

只需将
.before\u bttn
类重命名为
.sign\u按钮
类即可

希望有帮助


。注册按钮{
-webkit过渡：.3s缓解；
-moz转换：.3s放松；
-ms转换：.3s缓解；
-o-转变：.3s缓解；
过渡：放松；
字号：21px；
字体系列：Zona；
颜色：白烟；
边界：0；
位置：相对位置；
顶部：50px；
高度：50px；
左：120px；
字母间距：1px；
背景：#1ed5a3；
光标：指针；
宽度：140px；
溢出：隐藏；
z指数：1；
}
.注册按钮：在{
内容：“；
背景#49d6a7；
排名：0；
右：100%；
底部：0；
z指数：-1；
位置：绝对位置；
左：0；
过渡：对。3秒放松；
-webkit过渡：对。3秒轻松；
}
.注册按钮：悬停：之前{
右：0；
颜色：白色；
}

注册
鼠标悬停时从左到右填充背景？或者单击时？希望动画何时显示？悬停时背景从左向右填充？或者当您单击时？您希望动画何时显示？是的，我看到我们的答案几乎相同：））是的，我看到我们的答案几乎相同：））