Реализация простого эффекта slideToggle на изображениях меню навигации - PullRequest
Новая
       19

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

1 голос
/ 11 декабря 2011

Я успешно реализовал эффект 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 UI, если это возможно.

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

Спасибо,

Ник

1 Ответ

0 голосов
/ 11 декабря 2011

Попробуйте изменить 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;
}

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

...