Hello all, I'm a newcomer here and I've been trying my hand at some basic JQuery. However, I've encountered an issue that I could use some help with. Have you ever come across those boxes on websites where when you hover over them, an arrow inside the box moves slightly to the left, and then returns to its original position when you move the mouse away? Well, I've managed to get the mouse-over effect working fine with my code, but the mouse-out is causing the arrow to keep moving further to the left each time instead of returning to its original position.
I'm sure many of you have seen the effect I'm going for, but I suspect that I may not have set it up in the most efficient way. Can anyone provide some assistance? I've made it this far on my own, but now I'm feeling a little stuck.
<!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>-</title>
<style type="text/css">
#red {
height: 80px;
width: 200px;
background-color: #df0000;
float: left;
position: absolute;
z-index: 998;
display: none;
left: 0px;
top: 0px;
}
#gray {
height: 80px;
width: 200px;
background-color: #232323;
float: left;
position: absolute;
z-index: 997;
left: 0px;
top: 0px;
}
#wording{
height: 80px;
width: 200px;
float: left;
position: absolute;
z-index: 999;
left: 0px;
top: 0px;
background-image: url(getit.png);
background-repeat: no-repeat;
}
#wrap {
height: 80px;
width: 200px;
left: 50%;
top: 50%;
position: absolute;
margin-top: -40px;
margin-left: -100px;
}
#arrow {
font-family: Verdana, Geneva, sans-serif;
font-size: 24px;
color: #df0000;
position: absolute;
top: 50%;
right: 15px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#wording').mouseenter(function(){
$('#red').animate({'width': 'toggle'});
$('#arrow').css('color','white');
$('#arrow').delay(100).animate({'left': '-=3px'}, "fast");
});
$('#wording').mouseleave(function(){
$('#red').animate({'width': 'toggle'});
$('#arrow').css('color','red');
$('#arrow').delay(100).animate({'right': '+=3px'}, 'fast');
});
});
</script>
</head>
<body>
<div id="wrap">
<div id="wording">
<div id="arrow">></div>
</div>
<div id="red"></div>
<div id="gray"></div>
</div>
</body>
</html>