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

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


jquery hover submenu slidetoggle
person Jockie    schedule 07.01.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Изменить:

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

Удалите #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;

person Fabian    schedule 07.01.2012
comment
Но я хочу написать универсальный код для всех 8 ящиков. Это приведет к одновременному скольжению всех подменю. это главная проблема для меня - person Jockie; 07.01.2012
comment
Я посмотрю на это для вас завтра, вернитесь к вашему вопросу вовремя :) - person Fabian; 07.01.2012