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

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

2 голосов
/ 15 ноября 2011

У меня есть выпадающее меню, которое работает нормально, но я хочу добавить некоторые 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;
 }

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

Ответы [ 2 ]

2 голосов
/ 15 ноября 2011

Вы можете использовать функцию .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/

1 голос
/ 15 ноября 2011

Вы можете использовать .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) перед ними, иначе у вас будут причуды, если пользователь взаимодействуетс ним много раз до завершения предыдущей анимации.

...