cancelling jquery timeouts

Expand Post »

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.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
	$("#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();
		});
	});
	$("#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

Similar Threads

Microsoft shows JQuery some love in Windows Software
sorting PHP results with jQuery? in PHP
JQuery Accordion Menu (Help Needed) in JavaScript / DHTML / AJAX
Jquery, prototype, ... vs javascript in JavaScript / DHTML / AJAX
Problem with slider (jQuery) containing scrool bar in Firefox in Java

cmills83

Reputation Points: 37

Solved Threads: 1

Posting Whiz in Training

Offline

249 posts
since Jun 2004

Permalink

Sep 30th, 2009

Re: cancelling jquery timeouts

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

nauticalmac

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

5 posts
since Dec 2007

Permalink

Oct 1st, 2009

Re: cancelling jquery timeouts

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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
$(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();
		});
	});
});
$(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

cmills83

Reputation Points: 37

Solved Threads: 1

Posting Whiz in Training

Offline

249 posts
since Jun 2004

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Change the name of a file getting downloaded

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Simple form not working through Ajax, works ok from a direct html

DaniWeb Message

Cancel Changes

User Name
Password