эффект опрокидывания с помощью Jquery

Question

Не могли бы вы помочь мне в создании эффекта ролловера с помощью jquery. Я хочу, чтобы при наведении курсора на любой из пунктов меню текст скользил вниз и исчезал, а изображение скользило сверху вниз к центру (например Вы можете увидеть этот эффект здесь panda , так как вы можете видеть, как картинка скользит сверху вниз, но текст не скатывается вниз, что не то, что нужно).

Я знаю, что это легко сделать с помощью вспышки, но я не хочу, чтобы мое меню во флэш-памяти было плохой практикой.

Можете ли вы сказать мне, что мне нужно изменить в моем меню HTML и какие функции jquery я должен использовать.

Большое спасибо за вашу помощь

P.S. это мое меню HTML, и вы можете увидеть мое меню здесь

<ul class="nav">

<li class="active first"><a href="#" class="home">Home</a></li>
<li><a href="#" class="news">News</a></li>
<li><a href="#" class="offers">Special offers</a></li>
<li><a href="#" class="private">Private label</a></li>
<li><a href="#" class="locations">Locations</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="jobs">Jobs</a></li>
<li><a href="#" class="contact">Contact us</a></li>
<li><a href="#" class="mm">Multimedia</a></li>

</ul>

МЕНЮ:

Answer 1

Вместо того, чтобы делать это для вас, я предложу несколько мест, чтобы начать поиск ..

Вот пример, который можно легко изменить, чтобы использовать «rollover» вместо «click»: http://css -tricks.com / examples / MenuFader /

Подробная информация о том, как приведенный выше пример был составлен (учебник): http://css -tricks.com / обучение-JQuery выцветание-меню замены-контент /

Я нашел этот учебник, выполнив поиск в Google по словам "Примеры эффектов jquery": http://www.google.com/search?hl=en&q=jquery+effects+examples&btnG=Google+Search&aq=f&oq= и нажав на первую и вторую ссылки.

Удачи в вашем проекте Jquery.

Answer 2

Перво-наперво, вы действительно захотите присвоить свои независимые идентификаторы тегов привязки, поскольку это значительно облегчит выполнение ваших задач.

Посмотрите на функции slideDown () и slideToggle (), и вам, в основном, потребуется настроить скрытые элементы div, а затем при событии mouseover вы можете переключать текст с ползунка и разделить скрытое изображение, а затем делать указатель мыши. наоборот.

Удачи, работать с jQuery очень весело. Поиграй с ним и посмотри, что можно взорвать!