Hello, I am very new to Javascript and am having a few issues with my slider. This is a very basic slider which uses the animate function to slide in the images from the sides depending on the direction arrow that is pressed.

Currently the slider uses the animate function to slide the images in, I would like to change this to the fade effect. Also, there is no delay function so if someone clicks the left or right arrows really fast, it registers it and it takes a while for the slider to catch up and there are issues with overlapping. I was hoping someone could steer me in the direction of changing this to a fade slider and setting up a function to restrict the "next" and "previous" functions from firing until the previous animation is complete.

Thanks in advance!

Code:
var currentSlideIndex = 0,
slides;
function setTopSlider(){
  if (jQuery('#top_slider #container .slide').length != 0) {
    slides = jQuery('#top_slider #container > .slide');
    for(var i=0; i <= slides.length; i++){
      jQuery(slides[i]).css('left','100%');
    };
    jQuery(slides[currentSlideIndex]).css('left','0%');

	var el=jQuery('.dot:eq('+currentSlideIndex+')');
	src = el.css("background-image").replace("_off", "_over");
	el.css("background-image", src);
	el.addClass('active');
  };
};

function slide(dir) {
	var current, next, nextSlide;
	current = jQuery(slides[currentSlideIndex]);
	if(!isNaN(dir)){
		next = dir;
		if(next > currentSlideIndex )dir = 'left';
		else dir = 'right';
	};


	  if(dir == 'left'){
	  	if(!next){
		   next = currentSlideIndex + 1;
		   if(next >= slides.length){
		      next = 0;
		   }
		}
	    nextSlide = jQuery(slides[next]);
	    nextSlide.css('left','100%');
	    nextSlide.css('z-index',parseInt(current.css('z-index'), 10)+1);
	    nextSlide.animate({left: '0%'}, 1500);
    	current.animate({left: '-100%'}, 1500);
	  }else{
	  	console.log('moving right');
	  	if(!next){
	  		 next = currentSlideIndex - 1;
		    if(next < 0){
		      next = slides.length-1;
		    }
	  	}
	  	nextSlide = jQuery(slides[next]);
	    nextSlide.css('left','-100%');
	    nextSlide.css('z-index',parseInt(current.css('z-index'), 10)+1);
		nextSlide.animate({left: '0%'}, 1500);
    	current.animate({left: '100%'}, 1500);
	  };

	current.addClass('active');
	nextSlide.removeClass('active');


	var el=jQuery('.dot:eq('+currentSlideIndex+')');
	src = el.css("background-image").replace("_over", "_off");
	el.css("background-image", src);
	el.removeClass('active');


	el=jQuery('.dot:eq('+next+')');
	src = el.css("background-image").replace("_off", "_over");
	el.css("background-image", src);
	el.addClass('active');
	

  	
  	console.log('currentSlideIndex'+currentSlideIndex);
  	console.log('next'+next);
  	console.log('dir'+dir);
  	currentSlideIndex = next;
};