jQuery fadeOut not working.

apotd · 12-12-2011, 06:46 PM

I can't seem to find what I'm doing wrong. I want the div named "numberedpagecontainer" to fade out when I click the image I gave the id "click", which brings me back to my index.html.

HTML

Code:

<head>
	<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
</head>

<body>
	<div id="backbutton">
		<a href="index.html" title="back"><img src="images/arrowback.png" id="click" alt="back"></a>
	</div>

	<div id="numberedpagecontainer">
		<p>
		Lorem ipsum dolor sit amet
		</p>	
	</div>
</body>

jQuery

Code:

<script type="text/javascript">

	$(document).ready(function(){
		$('#click').click(function(){
			$('#numberedpagecontainer').fadeOut(900);
		});
	});

</script>

VIPStephan · 12-13-2011, 12:55 PM

The image is inside an anchor with an href attribute, and of course, clicking the link brings you to the link reference (in this case index.html). You need to assign the onclick event handler to the link and tell it to not perform the default action. You can do this with:

Code:

$(function(){
	$('#backbutton a').click(function(e){
		e.preventDefault();
		$('#numberedpagecontainer').fadeOut(900);
	});
});

No need to assign an ID to the image, by the way.

apotd · 12-13-2011, 02:07 PM

Thank you, it works. Well, at least partially.

When I click the link I do get the fadeOut effect, but it doesn't bring me to my homepage. I only see the 1.html page with only a grey background.

Also, I have a little question, you say I have to tell it not to perform the default action by adding:

Code:

e.preventDefault();

but I don't really understand why this exactly is.

VIPStephan · 12-13-2011, 05:14 PM

The default action of a link on click is to bring you to the referenced file (i. e. in your case to the index page). However, you didn’t specify that you actually wanted to fade out that div and then go to the page specified in the link. What happens is that when you click the link it loads the new page immediately so you never see the fade-out occur. What you want is the fade-out and after that’s done go to the specified page.

Therefore your code needs to look something like this:

Code:

$(function(){
	$('#backbutton a').click(function(e){
		e.preventDefault();
		$('#numberedpagecontainer').fadeOut(900, function() {
                     window.location = $(this).attr('href');
                });
	});
});

The code explained: When clicking the link it prevents the browser from loading the index page initially and just fades out the div. After that’s done it loads the page.

apotd · 12-13-2011, 06:09 PM

Thanks for the explanation.

I tried the code, and it goes to another page, which is not my index but an "undefined" page.

VIPStephan · 12-13-2011, 10:59 PM

Ah, right, sorry. The this keyword refers to the #numberedpagecontainer. Try this:

Code:

$(function(){
	$('#backbutton a').click(function(e){
		var ref = $(this).attr('href');
		e.preventDefault();
		$('#numberedpagecontainer').fadeOut(900, function() {
                     window.location = ref;
                });
	});
});

apotd · 12-14-2011, 10:09 AM

Thank you very much, this works perfectly!