jQuery fadeIn / fadeOut в неупорядоченном списке

Question

jQuery fadeIn / fadeOut в неупорядоченном списке

0

Я пытаюсь использовать эффекты jQuery fadeIn/fadeOut для изображений, которые используются как кнопки в неупорядоченном списке. Я хочу иметь возможность быстро и медленно вызывать зависшее изображение на мыши. Проблема, с которой я сталкиваюсь, заключается в том, что я пытаюсь сделать это как горизонтальное меню с плавающими тегами <li>. Я создал jsfiddle с таким простым примером, как мог. Список в примере содержит только 1 элемент списка, но на самом деле он имеет 4 или 5.

Чтобы разместить изображения наведите курсор, я создал вторую <ul> чтобы она располагалась поверх другого списка. Что происходит сейчас, так это то, что при зависании он делает fadeIn fadeOut дважды. Я предполагаю, что это происходит один раз для каждого из <ul>.

Есть ли что-то, что я могу сделать, чтобы расположить два изображения друг над другом, в пределах того же <li>? Или другой (лучший) способ для этого? Любая помощь приветствуется.

DEMO

GKRobb 20 март 2014, в 20:32

Источник

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

seiseises · Accepted Answer · 2014-03-20T17-11-00.000Z

Вы можете избавиться от второго <ul>, поместив два изображения в ваш #menu1, а затем добавив эти несколько свойств в ваш CSS:

#menu1 {
    position: relative;
}

#hovbutton1 {
    position: absolute;
    top: 0;
}

Таким образом, вы позиционируете свое изображение наведения в абсолютном положении относительно его родителя, поэтому, когда показано, оно появится поверх другого.

Здесь jsFiddle, надеюсь, что это поможет.

Спасибо! Все, что мне нужно было сделать, и так просто.
Пожалуйста! И, между прочим, если вы не знали, если вы просто хотите создать текстовые эффекты при наведении (свечение, изменение цвета и т. Д.), Вы можете сделать это только с помощью CSS-свойств, таких как text-shadow и transition . Нет необходимости в изображениях или JQuery, а это значит, более быстрый код :)