Question

所以这只是我正在尝试做的简化版本：https://jsfiddle.net/mpgLLq9j/30/

基本上当我将鼠标悬停在'Dogs'上时，我希望子菜单可以像动画一样向下滑动。这是我用于此的代码：

@-webkit-keyframes slideInDown {
    0%   { top: 10; }
    100% { top: 0; }
}
@-moz-keyframes slideInDown {
    0%   { top: 10; }
    100% { top: 0; }
}
@-o-keyframes slideInDown {
    0%   { top: 10; }
    100% { top: 0; }
}
@keyframes slideInDown {
  0%   { top: 10; }
  100% { top: 0; }
}

.dog:hover ul.menu-2{
  opacity: 1;
  visibility: visible;
  animation: slideInDown 1s;
  -webkit-animation: slideInDown;
}

我无法弄清楚为什么这不起作用。有任何想法吗？

Answer 1

使用slidein的更简单方法是使用jquery animate： http://api.jquery.com/animate/

示例：https://jsfiddle.net/mpgLLq9j/36/

<script>
    $(function(){
    $(".dog").hover(function(){$(".menu-2",this).stop().slideDown();},function(){$(".menu-2",this).stop().slideUp();});
    });
</script>

下拉导航栏关键帧动画无法正常工作

1 个答案: