Menu
So, I have a set of divs in a sentece, and within one div is a link. When the link is clicked, I have all the other divs fade out, and the link is supposed to move to the left, then up. I can accomplish this easily, however, I’ve noticed that there’s a pause between when all the divs fade out, and then the moving of the link. During that pause, it jumps to the leftmost edge of the div that it is contained in.
Is there a way to prevent the div from jumping? The following is the code that I have. (I’ve supplied the html and javascript)
I tried using callbacks to prevent the div from jumping, but that didn’t really work…
[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”></script>
<script type=”text/javascript”>
$(function(){
$(‘#container #main #about’).click(function(){
$(‘#container #main #design’).fadeOut(4000);
$(‘#container #main #headline’).fadeOut(4000, ‘swing’, function(){
$(‘#container #main #about’).animate({
“top” : “-250px”
});
});
});
});
</script>
<title>tai says: “coming soon!”</title>
</head>
<body>
<div id=”container”>
<div id=”main”>
<div id=”headline”>My name is </div><div id=”about”><a href=”#”>Tai</a></div><div id=”headline”>. I </div><div id=”design”><a href=”#”>design</a></div><div id=”headline”> pretty things for people to look at.</div>
</div>
</div>
</body>
</html>