Member Avatar for Johnbonono

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
  • 202 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by ckchaudhary
Member Avatar for Johnbonono

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();
		});
	});
});
Member Avatar for Johnbonono

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

Member Avatar for ckchaudhary

use

$("#div1").stop(true, true, true).slideToggle(300);
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.