Search jQuery

jQuery Forum

Multiple hover effects at the same time for a dropdown-menu

in Getting Started • 8 years ago

Hi,

i´d like to show a submenu mouse over:

1. fadein ( opacity: 0 -> opacity : 1) effect and
2. position movement (position: absolute; top:20px -> top:50px) at the same time like this

But without "slideUp" and "slideDown". The whole box should move. E.g. http://panic.com/coda/ the hover effect/tooltip on "Download".

My actuel code is visible on jsfiddle

Thanks

Replies(2)

kbwood.au

Re: Multiple hover effects at the same time for a dropdown-menu

8 years ago

Your code already seems to be doing what you've asked for. What do you want it to do differently?

ogni

Re: Multiple hover effects at the same time for a dropdown-menu

8 years ago

This solution works great for me:

In action 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);
});
});

So, what is the different between:

A (works fine):

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

B (doesn´t work)

...
$('.sub-menu li#access ul').stop().animate({opacity: "1", marginTop: "25"}, 500);
},
function() {
$('.sub-menu li ul').stop().animate({opacity: "0", marginTop: "10"}, 500);
});
...

Top Reply

Response title

Attachments

jQuery Forum

Multiple hover effects at the same time for a dropdown-menu

Replies(2)

Re: Multiple hover effects at the same time for a dropdown-menu

Re: Multiple hover effects at the same time for a dropdown-menu

Statistics

Tags

Actions