Question

I am looking for solutions on my problem. I would like to make an animation (slide up, slide down) on hover but I cant to resolve it. If you take a look on this page it is a image router. This is clear CSS solution, works without JS but I wanna add sliding animation… If mouseenter on image submenu should slide up from the bottom and when mouseover submenu should slide down. Thanks a lot for your tips how to resolve it

Answer 1

Edit:

In your case this would be a solution:

Remove #menu ul li:hover ul { display: block; z-index: 300; } in your css.

$(function(){

    $('#menu ul li').mouseenter(function() {

        $(this).find('ul').css({'z-index':'300'}).slideDown();

    });

    $('#menu ul li').mouseleave(function() {

        $(this).find('ul').css({'z-index':'0'}).slideUp();

    });

});

Original:

This is very easy to understand if you are new to jQuery:

$(function(){

    $('#selector').mouseenter(function() {

        $('#submenu').slideUp();

    });

    $('#selector').mouseleave(function() {

        $('#submenu').slideDown();

    });

});

jQuery checks if you enter or leave an element with the mouse with e.g. .mouseenter() and .mouseleave(). Now you can use .slideUp() .slideDown() to slide another element.
Be sure to remove the css hover effect first and set the element you want to slide to display: none;