Unable To Establish A Callback
Below is the distillation of code with which I am having troubles. The code works, but I am sure that there must be a better way of doing things.
This simple program displays two boxes. When the user mouses over either box, all boxes are returned to their original state, a zIndex of 2 is applied to it, then the box expands partially over the other box. This works fine.
However, I am using setTimeout to coordinate the setting of the zIndex value, which is something that I would think would better be accomplished through a callback. The problem is that I do not know if a called function can take a callback (I have tried without success). Perhaps below is the right way to do this, but it looks awkward to me, so any comments on how to properly address this would be appreciated.
Additionally, I am wondering why "this" cannot be used in the statement:
setTimeout("$('#RedBox').css({ zIndex: 2 })", 250);, i.e.
setTimeout("$(this).css({ zIndex: 2 })", 250);
I am not getting an error message when I try this, it just doesn't work.
Any help for this learning programmer would certainly be appreciated.
Cheers -
george
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
function InitialValues() {
$('#RedBox').stop(true, false).animate({ width:'200px',height:'200px',marginLeft:'-100px' }, 250);
$('#BlueBox').stop(true, false).animate({ width:'200px',height:'200px',marginLeft:'100px' }, 250);
}
$(document).ready(
function() {
InitialValues();
$('#RedBox').hover(
function() {
InitialValues();
setTimeout("$('#RedBox').css({ zIndex: 2 })", 250);
$(this).animate({ width:'250px',height:'250px' }, 250);
}, function() {
InitialValues();
setTimeout("$('#RedBox').css({ zIndex: 0 })", 250);
}
)
$('#BlueBox').hover(
function() {
InitialValues();
$(this).animate({ width:'250px',height:'250px',marginLeft:'50px' }, 250);
}, function() {
InitialValues();
}
)
}
);
</script>
</head>
<body>
<div id="Cover" style="position:relative;width:200px;text-align:center;margin:0 auto;">
<div id="RedBox" style="position:absolute;left:0;top:50px;width:200px;height:200px;background-color:red;">red</div>
<div id="BlueBox" style="position:absolute;left:0;top:50px;width:200px;height:200px;background-color:blue;">blue</div>
</div>
</body>
</html>