Используя слайд-ап, слайд-эффекты jquery для выпадающего меню

У меня есть выпадающее меню, которое отлично работает, но я хочу добавить некоторые эффекты jquery, такие как анимация, слайд вверх, вниз,

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

 <script type="text/javascript">
     $(document).ready(function () {
         $('.ul-links > li').bind('mouseover', openSubMenu);
         $('.ul-links > li').bind('mouseout', closeSubMenu);

         function openSubMenu() {
             $(this).find('ul').css('visibility', 'visible');
         };

         function closeSubMenu() {
             $(this).find('ul').css('visibility', 'hidden');
         };     });
  </script>

Я пытался использовать :$('ul', this).slideDown(100); $('ul', this).slideUp(100); без успеха css:

.quiklinks .ul-links li ul
 {
position:absolute;
visibility: hidden;

margin: 0px;
padding-top:0px;
z-index: 1000;
top: 42px;
left:0px;
 }

Любая помощь будет высоко оценена


drop-down-menu jquery jquery-animate jquery-slide-effects
person Mr A    schedule 15.11.2011    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете использовать функцию .animate(), а не функцию .css():

 $(document).ready(function () {
     $('.ul-links > li').bind('mouseover', openSubMenu);
     $('.ul-links > li').bind('mouseout', closeSubMenu);

     function openSubMenu() {
         $(this).find('ul').animate({opacity : 1}, 500);
     };

     function closeSubMenu() {
         $(this).find('ul').animate({opacity : 0}, 500);
     };
 });

Документацию по .animate() можно найти здесь: http://api.jquery.com/animate/

Также есть несколько готовых анимаций:

$(this).find('ul').slideToggle(500);//http://api.jquery.com/slidetoggle/

$(this).find('ul').fadeToggle(500);//http://api.jquery.com/fadetoggle/

Вот jsfiddle для использования .slideToggle() и .fadeToggle(): http://jsfiddle.net/jasper/wFrpe/

person Jasper    schedule 15.11.2011
comment
я попробовал ваш пример, но он не работает, мне нужно изменить css для него - person Mr A; 15.11.2011
comment
Я использовал opacity, а не visibility, поэтому, если ваши элементы по умолчанию установлены на visibility:hidden, это нужно изменить на opacity:0;filter:alpha(opacity=0); (примечание: filter для IE). - person Jasper; 15.11.2011
comment
wat abt слайд вверх слайд вниз, и тумблер не работает - person Mr A; 15.11.2011
comment
добавил css в вопрос - person Mr A; 15.11.2011
comment
Вместо visibility: hidden; используйте opacity:0; (если вы хотите анимировать непрозрачность, как в моем примере выше) или display:none; (если вы хотите использовать функции переключения): jsfiddle.net/jasper/wFrpe/1 - person Jasper; 15.11.2011

arrow_upward
1
arrow_downward

Вы можете использовать .slideToggle() или .fadeToggle(). Продвинутых эффектов можно добиться, комбинируя несколько этих функций, или вы можете использовать подключаемый модуль анимации jQuery. для дополнительных эффектов.

Я также упростил привязку событий, используя .hover()

 <script type="text/javascript">
     $(document).ready(function () {
         $('.ul-links > li').hover(toggleMenu, toggleMenu);

         function toggleMenu() {
             $(this).find('ul').stop(true, true).slideToggle();
         } 
     });
 </script>

Я заметил, что вы также используете visibility:hidden; в своей таблице стилей. Вы должны удалить это, так как это противоречит тому, как jQuery использует стиль отображения для изменения видимости элемента.

Вы можете сделать это, вызвав метод hide():

 $('.ul-links > li').hide().hover(toggleMenu, toggleMenu);

БОНУСНЫЙ СОВЕТ:

При использовании анимаций всегда добавляйте .stop(true, true) перед ними, иначе у вас будут причуды если пользователь взаимодействует с ним много раз до завершения предыдущей анимации.

person Samuel Liew♦    schedule 15.11.2011
comment
попробовал ваш пример, но выпадающий список nuthing не показывает никаких подпродуктов, добавил css в вопрос - person Mr A; 15.11.2011