将 jquery 代码应用于 POP OUT MENU

Question

我正在尝试创建一个弹出菜单，因此每次用户将鼠标悬停在一个菜单上时，它都会弹出并将图标更改为彩色图标。

有一些代码的库存。

$('.box').hover(function() {
if(!$(this).data('open')){
    $(this).animate({ top: '-30px' }, 'slow', function() {});
} else {
    $('#.box').animate({ top: '50px' }, 'slow', function() {});
}

});

在这里演示：http://jsfiddle.net/6jLFP/4/

你能和我分享你编辑的 jsfiddle 吗？我现在真的被困住了。我还需要在它向上移动或弹出时悬停状态（彩色图标）处于活动状态。

Answer 1

你已经接近答案了。我做了一些改变：

• 将position:relative 添加到您的.box

  .box {
     position:relative;
  }
  

• 两个改变你的功能：

  $('.box').hover(function() {
     $(this).animate({ top: '-30px' }, 'slow');
   }, function () {
     $(this).animate({ top: '0px' }, 'slow');
   });
  

查看此演示http://jsfiddle.net/6jLFP/21/

您也可以使用 CSS 执行此操作，并将其添加到您的 CSS 文件中：

.box {transition:all 1s ease-in;}
.box:hover {top:-50px;}

查看此演示http://jsfiddle.net/6jLFP/27/。这里唯一的问题是兼容性。