下拉菜单同时有多个悬停效果答案

【问题标题】：Multiple hover effects at the same time for a dropdown-menu下拉菜单同时有多个悬停效果
【发布时间】：2012-02-05 17:29:46
【问题描述】：

我想在鼠标上显示一个子菜单：

淡入淡出（不透明度：0 -> 不透明度：1）效果和
位置移动（position: absolute; top:20px -> top:50px）同时像这样： http://www.tuttoaster.com/wp-content/uploads/demos/3/navigation.html

但没有“slideUp”和“slideDown”。整个盒子应该移动。例如。 http://panic.com/coda/“下载”上的悬停效果/工具提示。

jQuery:

$(function(){

$('.sub-menu li').hover(
   function(){

$('ul', this).stop().animate({opacity: '1', top: '50px'}, 800);
},
function() {
$('ul', this).stop().animate({opacity : '0', top: '20px'}, 300);
});
});

我的实际代码在 jsfiddle http://jsfiddle.net/C4c46/1/ 上可见

谢谢

【问题讨论】：

标签： jquery jquery-animate opacity fade

【解决方案1】：

这个解决方案非常适合我：

在行动http://jsbin.com/iquwuc/6/edit#preview

$(document).ready(function(){
$('.sub-menu li#access ul').hide();
    $('.sub-menu li#access').hover(function(){
        $('.sub-menu li#access ul').stop().animate({opacity: "show", marginTop: "25"}, 500);
        },
        function() {
        $('.sub-menu li ul').stop().animate({opacity: "hide", marginTop: "10"}, 500);
        });
});

【讨论】：