Несколько эффектов при наведении одновременно для выпадающего меню

Я хотел бы показать подменю мыши над:

  1. эффект затухания ( непрозрачность: 0 -> непрозрачность : 1) и
  2. перемещение позиции (позиция: абсолютная; верх: 20 пикселей -> верх: 50 пикселей) в то же время, как здесь: 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 opacity fade jquery-animate
person ogni    schedule 05.02.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это решение отлично работает для меня:

В действии 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);
        });
});
person ogni    schedule 06.02.2012