Posted By

lynseydesign on 03/24/11


Tagged


Versions (?)

Event Handlers (.live)


 / Published in: jQuery
 

  1. // 1) You can assign the click handler within the hover method. See below:
  2.  
  3. jQuery('#slideshow ul.buttons li.plus').hover(
  4. function(){
  5. jQuery(this).addClass('hover');
  6. jQuery(this).find(' > ul').animate({width:'176px'},'fast');
  7. jQuery('#slideshow ul.buttons li.hover span').click(function(){
  8. jQuery(this).parent('li').addClass('active').removeClass('hover');
  9. jQuery(this).siblings('ul').find('li ul li').animate({opacity:'1'},'fast');
  10. });
  11. },
  12. function(){
  13. jQuery(this).find(' > ul').css({'width':'6px'});
  14. jQuery(this).removeClass('hover').removeClass('active');
  15. jQuery('#slideshow ul.buttons li.active span').click(function(){
  16. jQuery(this).parent('li').removeClass('active').addClass('hover');
  17. jQuery(this).siblings('ul').find('li ul li').css({'opacity':'0'});
  18. });
  19. });
  20.  
  21. // or 2) This is the way I prefer. Use the .live() method. The .live() method works just like the .bind()
  22. // method. The difference is that .live() attaches a handler to a specified event for the selected elements,
  23. // now and in the future. You'd use it like this:
  24.  
  25.  
  26. jQuery('#slideshow ul.buttons li.plus').hover(
  27. function(){
  28. jQuery(this).addClass('hover');
  29. jQuery(this).find(' > ul').animate({width:'176px'},'fast');
  30. },
  31. function(){
  32. jQuery(this).find(' > ul').css({'width':'6px'});
  33. jQuery(this).removeClass('hover').removeClass('active');
  34. });
  35.  
  36. jQuery('#slideshow ul.buttons li.hover span').live('click', function(){
  37. jQuery(this).parent('li').addClass('active').removeClass('hover');
  38. jQuery(this).siblings('ul').find('li ul li').animate({opacity:'1'},'fast');
  39. });
  40.  
  41. jQuery('#slideshow ul.buttons li.active span').live('click', function(){
  42. jQuery(this).parent('li').removeClass('active').addClass('hover');
  43. jQuery(this).siblings('ul').find('li ul li').css({'opacity':'0'});
  44. });

Report this snippet  

You need to login to post a comment.