Question

我已成功将动画应用于网站中的标准按钮/链接。我忽略了为表单等输入某些按钮的事实，因此我在标准按钮上的设置在这种情况下不起作用。

我想知道是否有一种方法可以用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

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

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

如何在悬停时为input [type =“ submit”]的“值”设置动画？

1 个答案: