fade and change z-index

**wwfc** · 07-26-2016, 01:48 PM

hi all,

hoping that someone can answer a question for me - i am currently trying to get a bunch of divs to fade between each other when a link is clicked.
the basics seem to be working fine - but when i add more complex content to the divs - i seem to run into more problems.

this is the script i have

Code:

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#show2').click(function() {
  $('#mirza1, #mirza3').fadeOut(500);
  $('#mirza2').fadeIn(500);
});

$('#show3').click(function() {
  $('#mirza1, #mirza2').fadeOut(500);
  $('#mirza3').fadeIn(500);
});

$('#show1').click(function() {
  $('#mirza2, #mirza3').fadeOut(500);
  $('#mirza1').fadeIn(500);
});



});//]]> 

</script>

and it all does what it says - but... when the div/content gets faded out it still seems to be responding to mouse movements. i have some mouse reactive content in the divs and on fadein they aren't where they should be - as if they have already been reacting to the mouse movement (if you know what i mean?)

is there anyway of adding some z-index reference to it - so when faded it drops to the lowest z-index level? or maybe hide and then remove from the stage altogether... (or would the latter mean that the divs content would need to reload? not just appear?)

**jscheuer1** · 07-26-2016, 03:39 PM

The z-index stacking (zIndex in javascript, zIndex or quoted "z-index" for jQuery), is what's likely at issue here. But there is another way, you can move them around in the DOM, as whatever comes later, has a naturally occurring higher relative z-index. Also - if the divisions are all of the same dimensions, you don't have to be fading one in, while fading another out. You can simply move the next one that you want to be seen to the end of the parent element and then fade it in. It will cover the other(s). So, let's say you have:

HTML Code:

<div id="mirzacontainer">
<div id="mirza1"></div>
<div id="mirza2"></div>
<div id="mirza3"></div>
</div>

And all four of these divisions, including mirzacontainer are the same dimensions, and all three of the inner merza divisions are position absolute and display none to begin with. Then:

Code:

$(window).load(function(){
var $c = $('#mirzacontainer');
$('#show2').click(function() {
  $c.append($('#mirza2').fadeIn(500, function(){$('#mirza1, #mirza3').hide();}));
});

$('#show3').click(function() {
  $c.append($('#mirza3').fadeIn(500, function(){$('#mirza1, #mirza2').hide();}));
});

$('#show1').click(function() {
  $c.append($('#mirza1').fadeIn(500, function(){$('#mirza2, #mirza3').hide();}));
});
});

Only I would do that on document load not window load, though if there are a lot of images, window load still might be best. And I would have one division shown immediately. Here's a working demo:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#mirzacontainer, #mirzacontainer div {
	width: 100px;
	height: 100px;
}
#mirzacontainer div {
	position: absolute;
	display: none;
	background-color: #ffa;
}
span[id^=show] {
	cursor: pointer;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
jQuery(function($){	
	var $c = $('#mirzacontainer');
	$('#show2').click(function() {
		$c.append($('#mirza2').fadeIn(500, function(){$('#mirza1, #mirza3').hide();}));
	});
	
	$('#show3').click(function() {
		$c.append($('#mirza3').fadeIn(500, function(){$('#mirza1, #mirza2').hide();}));
	});
	
	$('#show1').click(function() {
		$c.append($('#mirza1').fadeIn(500, function(){$('#mirza2, #mirza3').hide();}));
	}).trigger('click');
});
</script>
</head>
<body>
<div id="mirzacontainer">
<div id="mirza1">Hello There!</div>
<div id="mirza2">My name is</div>
<div id="mirza3">John</div>
</div>
<span id="show1">1</span> <span id="show2">2</span> <span id="show3">3</span>
</body>
</html>

At least that's the basics.