Question

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

有一些代码存货。

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

}）;

DEMO HERE：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/ 。这里唯一的问题是关于兼容性。

将jquery代码应用于POP OUT MENU

1 个答案: