Реализация простого эффекта slideToggle для изображений меню навигации

Я успешно реализовал эффект slideToggle для элемента/изображения панели навигации. Эффект можно увидеть здесь.

Я надеялся, что slideToggle будет двигать скрытый DIV/изображение прямо вниз, а не эффект, который я вижу, который больше похож на эффект изогнутости/переворота (надеюсь, вы следуете за мной!). Есть ли способ получить этот эффект, используя только jQuery?

Вот CSS:

li#home {
    background: url('images/home.png') no-repeat;
    width: 120px;
    height: 40px;
}

img.hover {
    display: none;
}

HTML:

<div class="nav">
<ul>
<li id="home"><a href="index.html" class=""><img src="images/home-hover.png" width="120px" height="40px" class="hover"></a></li>
</ul>

И сценарий:

$('li#home').hover(function () {
    $('img.hover').slideToggle('medium');
    });

Поскольку я не мог заставить это работать, я также попытался реализовать пользовательский интерфейс jQuery с включенным эффектом слайда и этот скрипт, но я не получил никакого эффекта от этого:

$('li#home').hover(function () {
      $('img.hover').show("slide", { direction: "down" }, 1000);
});

Я бы предпочел не использовать пользовательский интерфейс jQuery, если это возможно.

Может ли кто-нибудь помочь с этим?

Спасибо,

Ник


jquery slide jquery-ui slidetoggle
person Nick    schedule 11.12.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте изменить CSS на это:

li#home {
    background: url('http://salliannputman.com/images/home.png') no-repeat;
    width: 120px;
    height: 40px;
    position: relative;
}

img.hover {
    position: absolute;
    height: 40px;
    display: none;
}

.nav {
    background-color:#292929;
    padding:20px;
}

Ваша обновленная скрипта.

person karim79    schedule 11.12.2011
comment
Я сделал это, и это не имеет никакого значения для эффекта слайда. - person Nick; 11.12.2011
comment
@Nick - думаю, это может быть из-за того, что slideToggle срабатывает дважды. Я отредактировал свой ответ. - person karim79; 11.12.2011
comment
Спасибо, но эффект слайда все тот же - person Nick; 11.12.2011
comment
@Nick, как вы думаете, вы могли бы решить проблему в песочнице на jsfiddle.net, чтобы мне / нам было легче с ней возиться? - person karim79; 11.12.2011
comment
конечно, вот скрипка. Вероятно, все работает так, как должно, просто эффект выглядит не так, как я хочу. На что я надеялся, так это на то, что цвет текста может заполняться сверху вниз при наведении курсора. Знаете ли вы, есть ли способ достичь этого? Спасибо. - person Nick; 11.12.2011
comment
@Nick - снова отредактировано, я думаю, что это небольшое улучшение по сравнению с предыдущим положением дел. - person karim79; 11.12.2011
comment
Под этим я подразумеваю наличие эффекта раскрытия, то есть скрытый элемент div находится на месте, но раскрывается постепенно. - person Nick; 11.12.2011
comment
@Nick, тогда я уверен, что вам понадобится другой подход, например, расширение белого фона поверх полупрозрачного изображения. - person karim79; 11.12.2011
comment
Спасибо. Разве нет эффекта jQuery для раскрытия? - person Nick; 11.12.2011