Advanced Search

Event Handlers (.live)

/ Published in: jQuery
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.