Advanced Search

Return to Snippet

Revision: 43448
at March 24, 2011 03:02 by lynseydesign
Initial Code 
// 1) You can assign the click handler within the hover method. See below:

jQuery('#slideshow ul.buttons li.plus').hover(
function(){
	jQuery(this).addClass('hover');
	jQuery(this).find(' > ul').animate({width:'176px'},'fast');
	jQuery('#slideshow ul.buttons li.hover span').click(function(){
		jQuery(this).parent('li').addClass('active').removeClass('hover');
		jQuery(this).siblings('ul').find('li ul li').animate({opacity:'1'},'fast');
		}); 
},
function(){
	jQuery(this).find(' > ul').css({'width':'6px'});
	jQuery(this).removeClass('hover').removeClass('active');
	jQuery('#slideshow ul.buttons li.active span').click(function(){
		jQuery(this).parent('li').removeClass('active').addClass('hover');
		jQuery(this).siblings('ul').find('li ul li').css({'opacity':'0'});
		});
});	
	
// or 2) This is the way I prefer. Use the .live() method. The .live() method works just like the .bind()
// method. The difference is that .live() attaches a handler to a specified event for the selected elements, 
// now and in the future. You'd use it like this:

	
jQuery('#slideshow ul.buttons li.plus').hover(
function(){
	jQuery(this).addClass('hover');
	jQuery(this).find(' > ul').animate({width:'176px'},'fast');
},
function(){
	jQuery(this).find(' > ul').css({'width':'6px'});
	jQuery(this).removeClass('hover').removeClass('active');
});	
	
	jQuery('#slideshow ul.buttons li.hover span').live('click', function(){
		jQuery(this).parent('li').addClass('active').removeClass('hover');
		jQuery(this).siblings('ul').find('li ul li').animate({opacity:'1'},'fast');
		}); 
	
	jQuery('#slideshow ul.buttons li.active span').live('click', function(){
		jQuery(this).parent('li').removeClass('active').addClass('hover');
		jQuery(this).siblings('ul').find('li ul li').css({'opacity':'0'});
		});
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Event Handlers (.live)

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
jQuery