jquery наведите курсор на подменю со скользящим эффектом - PullRequest
Новая
       14

jquery наведите курсор на подменю со скользящим эффектом

1 голос
/ 07 января 2012

Я ищу решения по моей проблеме.Я хотел бы сделать анимацию (скользить вверх, скользить вниз) при наведении, но я не могу решить ее.Если вы посмотрите на эту страницу, то это маршрутизатор изображений.Это ясное решение CSS, работает без JS, но я хочу добавить скользящую анимацию ... Если указатель мыши в подменю изображения должен скользить снизу вверх, а когда подменю при наведении курсора мыши должен скользить вниз.Большое спасибо за ваши советы, как решить эту проблему

1 Ответ

2 голосов
/ 07 января 2012

Редактировать:

В вашем случае это будет решение:

Удалите #menu ul li:hover ul { display: block; z-index: 300; } в вашем 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();

    });

});

Оригинал:

Это очень просто понять, если вы новичок в jQuery: 

$(function(){

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

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

    });

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

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

    });

});

jQuery проверяет, вводите ли вы элемент или оставляетес помощью мыши, например, .mouseenter () и .mouseleave () .Теперь вы можете использовать .slideUp () .slideDown () для перемещения другого элемента.Обязательно сначала удалите эффект наведения CSS и установите элемент, который вы хотите переместить, на display: none;

...