cancelling jquery timeouts

[cmills83]

Hi not sure if its technically a timeout but I am building a sliding jquery nav, the sliding is fine.

theres 4 buttons you can click whatever one and they will slide into place even if they are in the middle of sliding, cool. BUT they each also open a loader for 2 seconds then fade in a div.

$("#nav_1").bind("click",function() {
		$("#nav_1").animate({ left: "0px" }, 500, "easeOutCirc");
		$("#nav_2").animate({ left: "560px" }, 500, "easeOutCirc");
		$("#nav_3").animate({ left: "620px" }, 500, "easeOutCirc");
		$("#nav_4").animate({ left: "680px" }, 500, "easeOutCirc");
		$('.hidden').css({ display: "none"});
		$('#loader').fadeIn().fadeTo(2000, 1).fadeOut(1000, function() {
			$(this).fadeOut();
			$("#div_1").fadeIn();
		});
	});
	$("#nav_2").bind("click",function() {
		$("#nav_1").animate({ left: "0px" }, 500, "easeOutCirc");
		$("#nav_2").animate({ left: "60px" }, 500, "easeOutCirc");
		$("#nav_3").animate({ left: "620px" }, 500, "easeOutCirc");
		$("#nav_4").animate({ left: "680px" }, 500, "easeOutCirc");
		$('.hidden').css({ display: "none"});
		$('#loader').fadeIn().fadeTo(2000, 1).fadeOut(1000, function() {
			$(this).fadeOut();
			$("#div_2").fadeIn();
		});
	});

Problem is when you click through the buttons quickly its keeping track of the buttons clicked/divs to display. So even when you stop clicking it will finish the loader, display the div, finish the next loader, display the next div, etc.

How do i clear that 2 second delay on the loader and just hide it?

Thanks

[nauticalmac]

You should be able to use jQuery's stop() function which is explained on the jQuery site here.

[cmills83]

Didnt seem to work, I need to stop the fades I have going on because they have a delay on them. Any idea how to apply the stop() to a fade, i tried this but it didnt work:

$(document).ready(function() {
	// Reset Nav Icons if logo is clicked
	$("#logo").bind("click",function() {
		$("#nav_portfolio").animate({ left: "711px" }, 500, "easeOutCirc");
		$("#nav_about").animate({ left: "778px" }, 500, "easeOutCirc");
		$("#nav_services").animate({ left: "846px" }, 500, "easeOutCirc");
		$("#nav_contact").animate({ left: "909px" }, 500, "easeOutCirc");
		$("#loader").stop();
		$(".content_wrap").fadeOut();
		$("#loader").fadeIn().fadeTo(2000, 1).fadeOut(1000, function() {
			$(this).fadeOut();
			$("#content_home").fadeIn();
		});
	});
	// Navigation sliding effect, page swap functions
	$("#nav_portfolio").bind("click",function() {
		$("#nav_portfolio").animate({ left: "157px" }, 500, "easeOutCirc");
		$("#nav_about").animate({ left: "778px" }, 500, "easeOutCirc");
		$("#nav_services").animate({ left: "846px" }, 500, "easeOutCirc");
		$("#nav_contact").animate({ left: "909px" }, 500, "easeOutCirc");
		$("#loader").stop();
		$(".content_wrap").fadeOut();
		$("#loader").fadeIn().fadeTo(2000, 1).fadeOut(1000, function() {
			$(this).fadeOut();
			$("#content_portfolio").fadeIn();
		});
	});
	$("#nav_about").bind("click",function() {
		$("#nav_portfolio").animate({ left: "157px" }, 500, "easeOutCirc");
		$("#nav_about").animate({ left: "224px" }, 500, "easeOutCirc");
		$("#nav_services").animate({ left: "846px" }, 500, "easeOutCirc");
		$("#nav_contact").animate({ left: "909px" }, 500, "easeOutCirc");
		$("#loader").stop();
		$(".content_wrap").fadeOut();
		$("#loader").fadeIn().fadeTo(2000, 1).fadeOut(1000, function() {
			$(this).fadeOut();
			$("#content_about").fadeIn();
		});
	});
	$("#nav_services").bind("click",function() {
		$("#nav_portfolio").animate({ left: "157px" }, 500, "easeOutCirc");
		$("#nav_about").animate({ left: "224px" }, 500, "easeOutCirc");
		$("#nav_services").animate({ left: "292px" }, 500, "easeOutCirc");
		$("#nav_contact").animate({ left: "909px" }, 500, "easeOutCirc");
		$("#loader").stop();
		$(".content_wrap").fadeOut();
		$("#loader").fadeIn().fadeTo(2000, 1).fadeOut(1000, function() {
			$(this).fadeOut();
			$("#content_services").fadeIn();
		});
	});
	$("#nav_contact").bind("click",function() {
		$("#nav_portfolio").animate({ left: "157px" }, 500, "easeOutCirc");
		$("#nav_about").animate({ left: "224px" }, 500, "easeOutCirc");
		$("#nav_services").animate({ left: "292px" }, 500, "easeOutCirc");
		$("#nav_contact").animate({ left: "355px" }, 500, "easeOutCirc");
		$("#loader").stop();
		$(".content_wrap").fadeOut();
		$("#loader").fadeIn().fadeTo(2000, 1).fadeOut(1000, function() {
			$(this).fadeOut();
			$("#content_contact").fadeIn();
		});
	});
});

thanks for the reply