Question

我正在使用网球表情符号进行提交按钮，并且当用户点击它时，我想将其设置为屏幕上的动画。

emoji http://emojipedia.org/wp-content/uploads/2013/07/160x160xtennis-racquet-and-ball.png.pagespeed.ic.aacvJSaqx9.jpg

我喜欢它可能会向上移动屏幕并缩小一点，然后继续离开屏幕顶部。我想现实主义它应该在它离开屏幕之前反弹一点，但那可能是一种不必要的复杂化。

这是我到目前为止所获得的jsfiddle：

(function() {
    $(document).on('click','#save',clicked)
    function clicked(myEvent) {
        myEvent.preventDefault()

        var local = {}
        local.width = ["50px", "swing" ]
        local.height = [ "50px", "swing" ]
    local.top = "-64px"
        $(this).animate(local,"slow")
    }
})()

问题在于它不会随着屏幕的缩小而向上移动。我希望你看起来像是为网球服务而获得一张王牌。

Answer 1

你必须在运行JavaScript之前绝对定位球，使用CSS：

#save {
    position: absolute;
    top: 100px;
}

Answer 2

可能是这样的：http://jsfiddle.net/LaRWY/7/

@-webkit-keyframes bounce {
  from, to  {
    top: 0;
    -webkit-animation-timing-function: ease-out;
  }
  50% {
    top: 220px;
    -webkit-animation-timing-function: ease-in;
  }
}
@keyframes bounce {
  from, to  {
    top: 0;
    animation-timing-function: ease-out;
  }
  50% {
    top: 220px;
    animation-timing-function: ease-in;
  }
}

#save{
  -webkit-animation-name: bounce;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 4.2s;

  animation-name: bounce;
  animation-iteration-count: infinite;
  animation-duration: 4.2s;
  position: absolute;
  top: 100px;
}

试图同时更改图像的位置和大小

2 个答案: