时间戳

首页 > 解决方案 > 如何在悬停时为 input[type="submit"] 的“值”设置动画？

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

问题描述

我已成功将动画应用于我网站中的标准按钮/链接。我忽略了一些按钮是 input[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;
    }
  }
}

标签： jqueryhtmlcss

解决方案

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

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

推荐阅读