jquery - 如何在悬停时为 input[type "value"] 的 ="submit"设置动画？

Question

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

我想知道是否有一种方法可以使用 jQuery 为输入的值设置动画？

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

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

HTML

<a href="#" class="btn"><span>Button 1</span></a>

<input class="btn" type="submit" value="Button 2">

SCSS

@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 在标签内而不是在输入中。尝试在整个按钮上应用动画，测试使用跨度外的动画规则编辑的 fiddle :

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;
  }