Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: js slidemenu - помогите сделать анимацию, пожалуйста

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
Поиск в теме | Версия для печати
Klinch
Отправлено: 19 Ноября, 2013 - 12:29:59
Post Id


Частый гость


Покинул форум
Сообщений всего: 214
Дата рег-ции: Июль 2012  


Помог: 0 раз(а)
Здравствуйте!

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

CODE (javascript):
скопировать код в буфер обмена
  1. var jqueryslidemenu={
  2.  
  3. animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds
  4.  
  5. buildmenu:function(menuid){
  6.         jQuery(document).ready(function($){
  7.                 var $mainmenu=$("#"+menuid+">ul")
  8.                 var $headers=$mainmenu.find("ul").parent()
  9.                 $headers.each(function(i){
  10.                         var $curobj=$(this)
  11.                         var $subul=$(this).find('ul:eq(0)')
  12.                         this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
  13.                         this.istopheader=$curobj.parents("ul").length==1? true : false
  14.                         $subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
  15.                        
  16.                         $curobj.hover(
  17.                                 function(e){
  18.                                         var $targetul=$(this).children("ul:eq(0)")
  19.                                         $targetul.css("display", "block")
  20.                                        
  21.                                         this._offsets={left:$(this).offset().left, top:$(this).offset().top}
  22.                                         var menuleft=this.istopheader? 0 : this._dimensions.w
  23.                                         menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
  24.                                         if ($targetul.queue().length<=1) //if 1 or less queued animations
  25.                                                 $targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
  26.                                 },
  27.                                 function(e){
  28.                                         var $targetul=$(this).children("ul:eq(0)")
  29.                                         //$targetul.slideUp(jqueryslidemenu.animateduration.out)
  30.                                         $targetul.css("display", "none")
  31.                                 }
  32.                         ) //end hover
  33.                 }) //end $headers.each()
  34.                 $mainmenu.find("ul").css({display:'none', visibility:'visible'})
  35.         }) //end document.ready
  36. }
  37. }
  38.  
  39. //build menu with ID="navi" on page:
  40. jqueryslidemenu.buildmenu("topnavi")
  41. jqueryslidemenu.buildmenu("navi")
  42.  


Спасибо!
 
 Top
imya
Отправлено: 19 Ноября, 2013 - 12:49:35
Post Id



Участник


Покинул форум
Сообщений всего: 1472
Дата рег-ции: Сент. 2012  
Откуда: Запорожье, Украина


Помог: 19 раз(а)
CODE (javascript):
скопировать код в буфер обмена
  1. slideUp()
  2. slideDown()

?

Рекомендую для ознакомления

(Отредактировано автором: 19 Ноября, 2013 - 12:50:56)



-----
PHP:
скопировать код в буфер обмена
  1. do {box != cat;} while (cat != box);


Когда нормальный человек, уезжая из дома одевает на жену пояс верности, веб-дизайнер ставит на нее счетчик...
 
My status
 Top
Klinch
Отправлено: 19 Ноября, 2013 - 14:13:32
Post Id


Частый гость


Покинул форум
Сообщений всего: 214
Дата рег-ции: Июль 2012  


Помог: 0 раз(а)
Сделал так:

CODE (javascript):
скопировать код в буфер обмена
  1. var jqueryslidemenu={
  2.  
  3. animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds
  4.  
  5. buildmenu:function(menuid){
  6.         jQuery(document).ready(function($){
  7.                 var $mainmenu=$("#"+menuid+">ul")
  8.                 var $headers=$mainmenu.find("ul").parent()
  9.                 $headers.each(function(i){
  10.                         var $curobj=$(this)
  11.                         var $subul=$(this).find('ul:eq(0)')
  12.                         this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
  13.                         this.istopheader=$curobj.parents("ul").length==1? true : false
  14.                         $subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
  15.                        
  16.                         $curobj.hover(
  17.                                 function(e){
  18.                                         var $targetul=$(this).children("ul:eq(0)")
  19.                                         $targetul.css("display", "block")
  20.                                        
  21.                                         this._offsets={left:$(this).offset().left, top:$(this).offset().top}
  22.                                         var menuleft=this.istopheader? 0 : this._dimensions.w
  23.                                         menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
  24.                                         if ($targetul.queue().length<=1) //if 1 or less queued animations
  25.                                                 $targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
  26.                                 },
  27.                                 function(e){
  28.                                         var $targetul=$(this).children("ul:eq(0)")
  29.                                         $targetul.slideUp(jqueryslidemenu.animateduration.out)
  30.                                         $targetul.css("display", "none")
  31.                                 }
  32.                         ) //end hover
  33.                 }) //end $headers.each()
  34.                 $mainmenu.find("ul").css({display:'none', visibility:'visible'})
  35.         }) //end document.ready
  36. }
  37. }
  38.  
  39. //build menu with ID="navi" on page:
  40. jqueryslidemenu.buildmenu("topnavi")
  41. jqueryslidemenu.buildmenu("navi")
  42.  


Теперь сворачивается нормально, а разворачиваться красиво не хочет. Как и раньше, просто появляется...
 
 Top
Klinch
Отправлено: 20 Ноября, 2013 - 11:13:43
Post Id


Частый гость


Покинул форум
Сообщений всего: 214
Дата рег-ции: Июль 2012  


Помог: 0 раз(а)
Выбрал другое меню, работает анимация SlideDow, т.е. меню открывается анимированно. Но закрывается простым исчезновением. Как поставить анимацию на закрытие? Пробовал всунуть туда SlideUp, не помогает Недовольство, огорчение


CODE (javascript):
скопировать код в буфер обмена
  1. var site = function() {
  2.         this.navLi = $('#nav li').children('ul').hide().end();
  3.         this.init();
  4. };
  5.  
  6. site.prototype = {
  7.        
  8.         init : function() {
  9.                 this.setMenu();
  10.         },
  11.        
  12.         setMenu : function() {
  13.        
  14.         $.each(this.navLi, function() {
  15.                 if ( $(this).children('ul')[0] ) {
  16.                         $(this)
  17.                                 .append('<span />')
  18.                                 .children('span')
  19.                                         .addClass('hasChildren')
  20.                 }
  21.         });
  22.        
  23.                 this.navLi.hover(function() {
  24.                         // mouseover
  25.                         $(this).find('> ul').stop(true, true).slideDown('slow', 'easeOutCirc');
  26.                 }, function() {
  27.                         // mouseout
  28.                         $(this).find('> ul').stop(true, true).hide()           
  29.                 });
  30.                
  31.         }
  32.  
  33. }
  34.  
  35. new site();
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« Напишите за меня, пожалуйста »


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



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB