AJAX

cancelling jquery timeouts

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jun 2004

Posts: 247

Reputation: cmills83 is an unknown quantity at this point

Solved Threads: 1

cmills83

Offline

Posting Whiz in Training

cancelling jquery timeouts

-1

Sep 29th, 2009

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.

 Help with Code Tags 
 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

•

Join Date: Dec 2007

Posts: 5

Reputation: nauticalmac is an unknown quantity at this point

Solved Threads: 0

nauticalmac nauticalmac is offline

Offline

Newbie Poster

Re: cancelling jquery timeouts

Sep 30th, 2009

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

•

Join Date: Jun 2004

Posts: 247

Reputation: cmills83 is an unknown quantity at this point

Solved Threads: 1

cmills83

Offline

Posting Whiz in Training

Re: cancelling jquery timeouts

Oct 1st, 2009

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:

 Help with Code Tags 
 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

Thread Tools	Search this Thread
Show Printable Version Email this Page

DaniWeb Message

Cancel Changes