How to set effect to slow in the jquery code? RSS

• • Reply
  

  asplearning

  Participant

  909 Points

  953 Posts

  How to set effect to slow in the jquery code?

  Nov 12, 2012 11:39 PM|LINK

  Hello everyone, I got the help from this link http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery:

  function mainmenu(){
  $(" #nav ul ").css({display: "none"}); // Opera Fix
  $(" #nav li").hover(function(){
  		$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
  		},function(){
  		$(this).find('ul:first').css({visibility: "hidden"});
  		});
  }
  
   $(document).ready(function(){
  	mainmenu();
  });

  I want to add some delay to hide on mouse out. What should I add to the code? I tried this but it doesn't work:

   $(this).find('ul:first').css({ visibility: "hidden" }).hide(400);

  Regards;

  
  
  

  
  
  

• • Reply
  

  asplearning

  Participant

  909 Points

  953 Posts

  Re: How to set effect to slow in the jquery code?

  Nov 13, 2012 01:45 AM|LINK

  Anyone please? 

  Thanks. 

• • Reply
  

  anil.india

  Contributor

  2613 Points

  453 Posts

  Re: How to set effect to slow in the jquery code?

  Nov 13, 2012 06:05 AM|LINK

  asplearning

  $(this).find('ul:first').css({visibility: "hidden"});

  Use setTimeout to do this.

  setTimeout(function() {
      $(this).find('ul:first').css({ visibility: "hidden"  });
  }, 400);

  Mark it as Answer, if you feel so. Thanks
  
  codepattern.net/blog ||@AnilAwadh
  • Edited by anil.india on Nov 13, 2012 06:06 AM
  • Edited by anil.india on Nov 13, 2012 06:06 AM
• • Reply
  

  asplearning

  Participant

  909 Points

  953 Posts

  Re: How to set effect to slow in the jquery code?

  Nov 13, 2012 07:31 PM|LINK

  Hello anil.india, I tried this code but it doesn't seem to work for me. does it work on your side?

  function mainmenu(){
  $(" .nav ul ").css({display: "none"}); // Opera Fix
  $(" .nav li").hover(function () {
      $(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(400);
  }, setTimeout(function () {
      $(this).find('ul:first').css({ visibility: "hidden" });
  }), 4000);
  }

  I set the delay time to 4000 just to check, but it feels the same on mouse out. Anything I didn't do correctly here?

  Thanks. 

• • Reply
  

  asplearning

  Participant

  909 Points

  953 Posts

  Re: How to set effect to slow in the jquery code?

  Nov 14, 2012 01:24 AM|LINK

  Any suggestion please?

  Thank you. 

• • Reply
  

  anil.india

  Contributor

  2613 Points

  453 Posts

  Re: How to set effect to slow in the jquery code?

  Nov 14, 2012 06:03 AM|LINK

  You are not applying it properly in your hover metho. Use below code, 

  $(" .nav li").hover(
      function() { $(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(400); }
    , function() {  setTimeout(function() { $(this).find('ul:first').css({ visibility: "hidden"  }); }, 400); }
  );

  For applying hover you can refer - http://dot-net-troubleshooting.blogspot.in/2011/05/hover-event-in-jquery.html
  
  

  Mark it as Answer, if you feel so. Thanks
  
  codepattern.net/blog ||@AnilAwadh
• • Reply
  

  asplearning

  Participant

  909 Points

  953 Posts

  Re: How to set effect to slow in the jquery code?

  Nov 14, 2012 11:00 AM|LINK

  Hello Anil.india, thanks for your reply. Try your suggestion again and here is the code:

  function mainmenu(){
  $(" .nav ul ").css({display: "none"}); // Opera Fix
  $(" .nav li").hover(
      function () { $(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(400); }
    , function () { setTimeout(function () { $(this).find('ul:first').css({ visibility: "hidden" }); }, 40000); }
  );
  }

  I tried to debug that in firefox just in case any syntax is missing but it seems to be correct. For some reasons, the effect is still the same. No delay at all. :(

  Appreciate your help very much.

  Regards;

• • Reply
  

  asteranup

  All-Star

  30184 Points

  4906 Posts

  Re: How to set effect to slow in the jquery code?

  Nov 15, 2012 09:55 AM|LINK

  Hi,

  Try to use animate method of jquery. Some examples are-

  http://delicious.com/anupdg/animate

  Thanks & Regards
  Anup Das Gupta
  Mark as Answer if you feel so. Visit My Blog
  • Marked as answer by Song-Tian - MSFT on Nov 19, 2012 08:02 AM
• • Reply
  

  TechFriend

  Participant

  955 Points

  182 Posts

  Re: How to set effect to slow in the jquery code?

  Nov 16, 2012 12:12 PM|LINK

  You can check various jquery effects 

  http://jqueryui.com/hide/

  Please Mark as Answer if this reply helps you :)