jquery - hidden child element visible on parent show

[sibble]

Hey I have a little bit of a weird problem... let me show the code first.

HTML:

	        	<div id="vnl-animal_box"> 
	        	    <a class="vnl-animal_bg" href="javascript:void(0);">Please select an animal.</a>
	        	    <div id="vnl-animal_select">
	        	        <p>Please select an animal.</p>
	        	        <ul>
	        	            <li><a href="javascript:void(0);">Bird</a></li>
	        	            <li><a href="javascript:void(0);">Cat</a></li>
	        	            <li><a href="javascript:void(0);">Dog</a></li>
	        	        </ul>
	        	        <a href="javascript:void(0);" class="vnl-reset">&larr;back</a>
	        	    </div>
	        	    <div id="vnl-test_type_select">
	        	        <p>Please select a test type.</p>
	        	        <ul>
	        	            <li><a href="/cats/genetic">Genetic</a></li>
	        	            <li><a href="/cats/infectious">Infectious</a></li>
	        	        </ul>
	        	        <a href="javascript:void(0);" class="vnl-reset">&larr;back</a>
	        	    </div>
	        	</div>

JS:

jQuery(document).ready(function($){
    $(".vnl-animal_bg").click(function () {
      $(this).fadeOut(500, function () {
		$("#vnl-animal_select").show("slow");
		});
    });	
    $("#vnl-animal_select").click(function () {
      $(this).fadeOut(500, function () {
		$("#vnl-test_type_select").show("slow");
		});
    });
	$(".vnl-reset").click(function () {
	  $(this).parent().fadeOut(500, function () {
		$(".vnl-animal_bg").show("slow");
		});
	});
});

*almost* everything works correctly, except when I hit the .vnl-reset button while viewing #vnl-animal_select box. When I do that, animal_select fades out correctly, but when .vnl-animal_bg is shown, #vnl-test_type_select also shows up.

Any help would be greatly appreciated!

Thanks,
Jeff