jquery - 将 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/ 。这里唯一的问题是兼容性。