0

I have a div with 2 divs inside it. The container div is positioned relative, and the 2 inside it are positioned absolute, one on top of the other (on the z axis).

I made it so that when the mouse enters the container div, the top div slides up and you see the one underneath, and when the mouse leaves it slides back down, but when you go in and out a few times before the animation has finished, it will slide up and down for every time you did it instead of just finishing the last one.

So I used the stop() on the top div before the animation each time, and now it will slide back down even if it's only gone half way up (which is good), but now when I move the mouse in and out really fast, sometimes it will stay at halfway and eventually it will just stay up or down no matter where you put the mouse.

Any suggestions?

2
Contributors
3
Replies
6
Views
5 Years
Discussion Span
Last Post by ckchaudhary
0

I should probably give you the code...

Here is index.html:

<!doctype html>
<html>
	<head>
		<title>jQuery</title>
		<meta charset="utf-8">
		<script src="jquery-1.6.1.min.js"></script>
		<script src="script.js"></script>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div id="mydiv">
			<div id="div1">
				<p>This is the first div. It has some cool text and stuff, but not as cool as the second div.</p>
			</div>
			<div id="div2">
				<p>This is the second div. zOMG ITS SO COOL OMGOMGOGM.
			</div>
		</div>
	</body>
</html>

Here is style.css:

#mydiv {
	border: 2px solid gray;
	height: 100px;
	width: 150px;
	margin: 150px 350px;
	position: relative;
	z-index: 2;
}
#div1 {
	position: absolute;
	z-index: 1;
	width: 150px;
	height: 100px;
	background-color: #eee;
	top: 0;
	left: 0;
}
#div2 {
	position: absolute;
	width: 150px;
	height: 100px;
	z-index: -1;
	top: 0;
	left: 0;
}

Here is script.js:

$(document).ready(function(){
	$("#mydiv").mouseenter(function(){
		$("#div1").slideToggle(300,function(){
			$("#div1").clearQueue();
		});
	});
	$("#mydiv").mouseleave(function(){
		$("#div1").slideToggle(300,function(){
			$("#div1").clearQueue();
		});
	});
});
0

Actually I changed slideUp() and slideDown() to slideToggle(), and stop() to clearQueue(), but it still does weird stuff.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.