Hi i have a website www.mexztest.com/novelnew
see my homepage i am using jquery to animate when mouse over.
but the problem is when i mouseout and mouse in to another button too fast the style seems to be mess around.
someone please help me.
here is my jquery code:

			
			$j('#slider-wrapper ul.slider-button li a.pri').mouseout(function(){
				
				// hide away all shown stuffs.
				$j('#slider-wrapper .school-bubble-title .bubble-title-pri').stop(true,true).css({width : 1, height:1}).hide(1);
				$j('img#slider1').stop(true,true).css({width : 1, height : 1, marginLeft:250, marginTop:-110}).hide(1);
				$j('.pribubble p, .pribubble h3').stop(true,true).css({fontSize:1}).hide(1);
				$j('.pribubble').stop(true,true).css({width : 1, height : 1, marginLeft : 1}).hide(1);
				// end of hiding
				
				
				$j('#anilogo').show().animate(
  					{width:"302",height:"209",marginLeft:"100",marginTop:"30"},
					{duration: '1',complete:function(){
						$j('#aniarrow').show().animate(
  							{width:"225",height:"88",marginLeft:"120",marginTop:"-90"},
							{duration:'1',easing:'easeOutExpo',complete:function(){
								$j('#anitext').show().animate(
									{width:"171",height:"25",marginLeft:"190",marginTop:"-30"},
										500
					  				);
								}}
							 );
						}}				
					);
				});

			
			
		
		$j('#slider-wrapper ul.slider-button li a.pri').mouseover(function(){
		
			$j('#anilogo').stop();
			$j('#aniarrow').stop();
			$j('#anitext').stop();
			
			// hide logo set////////////////////////////////////////////////////
			$j('#anilogo').css({width:1,height:1,marginLeft:200,marginTop:220}).hide(1);
			$j('#aniarrow').css({width:225,height:88,marginLeft:400,marginTop:-90}).hide(1);
			$j('#anitext').css({width:1,height:1,marginLeft:190,marginTop:80}).hide(1);
			// end hiding////////////////////////////////////////////////////
			
			setTimeout ( function(){
                
                	$j('img#slider1').show().animate({width:"467",height:"283",marginLeft:"0",marginTop:"0"},{
                    	
                    	easing: 'easeOutBounce'
                	});
                },500);
           	setTimeout(function(){
           	
           		
           		$j('.pribubble').show().animate({width:"147",height:"235",marginLeft:"0"},{
                   	duration: '2000',
                    easing: 'easeOutBounce'
               	});
                $j('.pribubble h3').animate({fontSize:"13"},{
                    duration: '500',
                	easing: 'easeOutBounce'
                });
                		
                $j('.pribubble p').show().stop(true, true).animate({fontSize:"12"},{
                    duration: '500',
                    easing: 'easeOutBounce'
                });
            },100);
            
            setTimeout ( function(){
            		$j('.bubble-title-pri').show();
                	$j('.bubble-title-pri').stop(true, true).animate({width:"220",height:"68",marginLeft:"0"},{
                    	duration: '2000',
                    	easing: 'easeOutBounce'
                	});
                	$j('.bubble-title-pri h1').stop(true, true).animate({fontSize:"18"},{
                    	duration: '1000',
                    	easing: 'easeOutBounce'
                	});
                },500);
		});
		
		
//////////////////////////////////////////////////// //////////Button 2 ////////////////////////////////////////////////////	
	
		$j('#slider-wrapper ul.slider-button li a.sec').mouseover(function(){
			
			
			$j('#anilogo').stop();
			$j('#aniarrow').stop();
			$j('#anitext').stop();
			
			// hide away the logo set////////////////////////////////////////////////////
			$j('#anilogo').css({width:1,height:1,marginLeft:200,marginTop:220}).hide(1);
			$j('#aniarrow').css({width:225,height:88,marginLeft:400,marginTop:-90}).hide(1);
			$j('#anitext').css({width:1,height:1,marginLeft:190,marginTop:80}).hide(1);
			// end hiding////////////////////////////////////////////////////////////////
			
			setTimeout ( function(){
                
                	$j('img#slider2').show().stop(true, true).animate({width:"467",height:"283",marginLeft:"0",marginTop:"0"},{
                    	
                    	easing: 'easeOutBounce'
                	});
                },500);
           	setTimeout(function(){
           	
           		
           		$j('.secbubble').show().stop(true, true).animate({width:"147",height:"235",marginLeft:"0"},{
                   	duration: '2000',
                    easing: 'easeOutBounce'
               	});
                $j('.secbubble h3').stop(true, true).animate({fontSize:"13"},{
                    duration: '500',
                	easing: 'easeOutBounce'
                });
                		
                $j('.secbubble p').show().stop(true, true).animate({fontSize:"12"},{
                    duration: '500',
                    easing: 'easeOutBounce'
                });
            },100);
            
            setTimeout ( function(){
            		$j('.bubble-title-sec').show();
                	$j('.bubble-title-sec').stop(true, true).animate({width:"220",height:"68",marginLeft:"0"},{
                    	duration: '2000',
                    	easing: 'easeOutBounce'
                	});
                	$j('.bubble-title-sec h1').stop(true, true).animate({fontSize:"18"},{
                    	duration: '1000',
                    	easing: 'easeOutBounce'
                	});
                },500);
		});
		
		$j('#slider-wrapper ul.slider-button li a.sec').mouseout(function(){
				
				$j('img#slider2').stop(true, true);
				// hide away all shown stuffs.
				$j('#slider-wrapper .school-bubble-title .bubble-title-sec').css({width : 1, height:1}).hide(1);
				$j('img#slider2').css({width : 1, height : 1, marginLeft:250, marginTop:-110}).hide(1);
				$j('.secbubble p, .secbubble h3').css({fontSize:1}).hide(1);
				$j('.secbubble').css({width : 1, height : 1, marginLeft : 1}).hide(1);
				
				
				// end of hiding
				$j('#anilogo').stop(true, true).show().animate(
  					{width:"302",height:"209",marginLeft:"100",marginTop:"30"},
  					{duration: '2000',complete:function(){
  						$j('#aniarrow').stop(true, true).show().animate(
  							{width:"225",height:"88",marginLeft:"120",marginTop:"-90"},
  							{duration:'1000',easing:'easeOutExpo',complete:function(){
								$j('#anitext').show().animate(
									{width:"171",height:"25",marginLeft:"190",marginTop:"-30"},
										200
					  				);
  						}}
  						);
  					}}
  					);
				
			});
			
		
//////////////////////////////////////////////////////////// Button 3 //////////////////////////////////////////////////////////// 
	$j('#slider-wrapper ul.slider-button li a.jc').mouseover(function(){
	
			$j('#anilogo').stop();
			$j('#aniarrow').stop();
			$j('#anitext').stop();
			// hide away logo set////////////////////////////////////////////////////
			$j('#anilogo').css({width:1,height:1,marginLeft:200,marginTop:220}).hide(1);
			$j('#aniarrow').css({width:225,height:88,marginLeft:400,marginTop:-90}).hide(1);
			$j('#anitext').css({width:1,height:1,marginLeft:190,marginTop:80}).hide(1);
			//end hiding.//////////////////////////////////////////////////////////////
			
			setTimeout ( function(){
                
                	$j('img#slider3').stop(true, true).show().animate({width:"467",height:"283",marginLeft:"0",marginTop:"0"},{
                    	
                    	easing: 'easeOutBounce'
                	});
                },500);
           	setTimeout(function(){
           	
           		
           		$j('.jcbubble').stop(true, true).show().animate({width:"147",height:"235",marginLeft:"0"},{
                   	duration: '2000',
                    easing: 'easeOutBounce'
               	});
                $j('.jcbubble h3').stop(true, true).animate({fontSize:"13"},{
                    duration: '500',
                	easing: 'easeOutBounce'
                });
                		
                $j('.jcbubble p').stop(true, true).show().animate({fontSize:"12"},{
                    duration: '500',
                    easing: 'easeOutBounce'
                });
            },100);
            
            setTimeout ( function(){
            		$j('.bubble-title-jc').show();
                	$j('.bubble-title-jc').stop(true, true).animate({width:"220",height:"68",marginLeft:"0"},{
                    	duration: '2000',
                    	easing: 'easeOutBounce'
                	});
                	$j('.bubble-title-jc h1').stop(true, true).animate({fontSize:"18"},{
                    	duration: '1000',
                    	easing: 'easeOutBounce'
                	});
                },500);
		});
		
		$j('#slider-wrapper ul.slider-button li a.jc').mouseout(function(){
				
				$j('img#slider3').stop();
				// hide away all shown stuffs.
				$j('#slider-wrapper .school-bubble-title .bubble-title-jc').css({width : 1, height:1}).hide(1);
				$j('img#slider3').css({width : 1, height : 1, marginLeft:250, marginTop:-110}).hide(1);
				$j('.jcbubble p, .jcbubble h3').css({fontSize:1}).hide(1);
				$j('.jcbubble').css({width : 1, height : 1, marginLeft : 1}).hide(1);
				
				// end of hiding
				$j('#anilogo').stop(true, true).show().animate(
  					{width:"302",height:"209",marginLeft:"100",marginTop:"30"},
  					{duration: '2000',complete:function(){
  						$j('#aniarrow').stop(true, true).show().animate(
  							{width:"225",height:"88",marginLeft:"120",marginTop:"-90"},
  							{duration:'1000',easing:'easeOutExpo',complete:function(){
								$j('#anitext').stop(true, true).show().animate(
									{width:"171",height:"25",marginLeft:"190",marginTop:"-30"},
										200
					  				);
  						}}
  						);
  					}}
  					);
				
			});

Have a variable that states that an animation is running and to not run any other animation until that one is completed.

so in sudo code something like this:

if(!isAnimationRunning){
runAnimation(function(){
isAnimationRunning = true;
},
{completed: function(){
isAnimationRunning = false;
}});
}

Also take a look at the queue(), dequeue() and clearQueue() methods for jQuery they might help.

any live code guide?
sorry new to jquery thing

http://api.jquery.com/category/effects/ for the queue methods.

This code is completely untested and is just a thought on what you can do.

//global variable to say whether an animation is complete
var isAnimationRunning = false;

$('somebutton').click(function() {
    //check to see if there are any animations running
    //if not, it is safe to run another animation
    if(!isAnimationRunning){
        //set this to false 
        isAnimationRunning = true;

        $('someimage').animate({'cssProperty': 'cssValue'}, 5000, function() {
            //set this to false upon completion so that other animations can run
            isAnimationRunning = false;
        });
    }
});

thanks cheers.