jquery - 鼠标悬停时如何使图像在 Logo 文本上弹起？

Question

我正在尝试创建类似 this 的东西，当鼠标悬停在 Logo 图像上时， Logo 图像会弹出我的 Logo 文本。我可以使文本淡出，但我似乎无法使标题部分的 Logo 弹起。

#logo-bunny {
  background: url(../images/logo-bunny.png);
  position: absolute;
  top: 84px;
}

.RI-logo {
  display: block;
  position: relative;
  margin: 0 auto;
  top: 0;
  overflow: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.RI-logo:hover {
  transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  -moz-transition: 0.25s;
  -webkit-transition: 0.25s;
  opacity: 0;
}
.RI-logo:hover ~ #logo-bunny {
  top: -20px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<a class="navbar-brand RI-logo" href="/">Resonance Inn
  <div id="logo-bunny">
  </div>
</a>

Answer 1

尝试利用css 动画

#logo-bunny {
  background: url(http://lorempixel.com/50/50/animals);
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50px;
  opacity:0;
}

.RI-logo {
  height:100px;
  display: block;
  position: relative;
  margin: 0 auto;
  top: 50px;
  /*overflow: hidden;*/
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.RI-logo:hover {
  transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  -moz-transition: 0.25s;
  -webkit-transition: 0.25s;
  color:transparent;
}

.RI-logo:hover > #logo-bunny {
  animation: popup 1500ms ease-in-out 0s both;
  -moz-animation: popup 1500ms ease-in-out 0s both;
  -ms-animation: popup 1500ms ease-in-out 0s both;
  -o-animation: popup 1500ms ease-in-out 0s both;
  -webkit-animation: popup 1500ms ease-in-out 0s both;
}

@keyframes popup {
  0% {
    top:50px;
    opacity:0;
  }
  50% {
    top:-45px;
  }
  100% {
    top:-10px;
    opacity:1;
  }
}

@-moz-keyframes popup {
  0% {
    top:50px;
    opacity:0;
  }
  50% {
    top:-45px;
  }
  100% {
    top:-10px;
    opacity:1;
  }
}

@-o-keyframes popup {
  0% {
    top:50px;
    opacity:0;
  }
  50% {
    top:-45px;
  }
  100% {
    top:-10px;
    opacity:1;
  }
}

@-webkit-keyframes popup {
  0% {
    top:50px;
    opacity:0;
  }
  50% {
    top:-45px;
  }
  100% {
    top:-10px;
    opacity:1;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<a class="navbar-brand RI-logo" href="/">Resonance Inn
  <div id="logo-bunny">
  </div>
</a>