悬停时如何对输入[类型= "submit"]的"value"进行动画处理？

Question

我已经成功地将动画应用于我网站中的标准按钮/链接。我忽略了某些按钮是表单等的input[type="submit"]的事实，因此在这种情况下，我在标准按钮上的设置不起作用。

我想知道是否有办法使用 jQuery 对输入的值进行动画处理？

我尝试过研究这个，但没有找到任何可能有帮助的东西，所以希望这里有人可以提供一些指导？

这是一个jsFiddle，提供我所在位置的示例。

.HTML

<a href="#" class="btn"><span>Button 1</span></a>
<input class="btn" type="submit" value="Button 2">

南海

@keyframes wiggle {
0%, 100%, 20%, 50%, 80% {
-webkit-transform: translateX(0);
-ms-transform:     translateX(0);
transform:         translateX(0)
}
40% {
-webkit-transform: translateX(-4px);
-ms-transform:     translateX(-4px);
transform:         translateX(-4px)
}
60% {
-webkit-transform: translateX(-2px);
-ms-transform:     translateX(-2px);
transform:         translateX(-2px)
}
}
.btn {
span {
display: block;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
&:hover,
&:not([disabled]):hover {
span {
animation-name: wiggle;
-webkit-animation-name: wiggle;
-moz-animation-name: wiggle;
-o-animation-name: wiggle;
-ms-animation-name: wiggle;
}
}
}

Answer 1

您的动画应用于 span，您只有 span 在标签内，而在输入中没有。尝试在整个按钮上应用动画，测试使用跨度外的动画规则编辑的小提琴：

https://jsfiddle.net/12bxcvh6/1/

.btn {
display: block;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
&:hover,
&:not([disabled]):hover {
animation-name: wiggle;
-webkit-animation-name: wiggle;
-moz-animation-name: wiggle;
-o-animation-name: wiggle;
-ms-animation-name: wiggle;
}