jQuery function jumping up 10px if previously fired? - ajax

Question

I have two jQuery functions that I've built and in testing them, I noticed that if the tabs are clicked while they have already been fired, they jump up about 10px, then jump back down to normal.
I have searched everywhere, and can't seem to find a solution that works.
I have the following code:
<div id="zoe">
<div class="floating-rim-container">
<a href="#">
<img src="images/rim-middle.png" class="floating-rim-wrapper-zoe" id="rim-7">
</a>
<a href="#">
<img src="images/rim-middle.png" class="floating-rim-wrapper-zoe" id="rim-8">
</a>
<a href="#">
<img src="images/rim-middle.png" class="floating-rim-wrapper-zoe" id="rim-9">
</a>
<a href="#">
<img src="images/rim-middle.png" class="floating-rim-wrapper-zoe" id="rim-10">
</a>
<a href="#">
<img src="images/rim-middle.png" class="floating-rim-wrapper-zoe" id="rim-11">
</a>
<a href="#">
<img src="images/rim-middle.png" class="floating-rim-wrapper-zoe" id="rim-12">
</a>
<div class="shadow-container">
<img src="images/shadow.png" class="shadow-zoe">
<img src="images/shadow.png" class="shadow-zoe">
<img src="images/shadow.png" class="shadow-zoe">
<img src="images/shadow.png" class="shadow-zoe">
<img src="images/shadow.png" class="shadow-zoe">
<img src="images/shadow.png" class="shadow-zoe">
</div>
</div>
</div>
I have this CSS:
.floating-rim-container {
width:960px;
height:300px;
margin:-295px auto;
vertical-align:top;
}
.floating-rim-wrapper-black,
.floating-rim-wrapper-zoe {
margin: 50px 0px;
padding: 0px 23px;
position:relative;
left:0;
}
.shadow-black, .shadow-zoe {
position:relative;
padding: 0px 8px;
}
#tab-container {
width:960px;
margin:0 auto;
font-family:'helvetica-light',Helvetica,Arial,sans-serif;
}
#blabel-tab {
background:#3d3d3d;
border-radius:0 0 15px 15px;
-webkit-border-radius:0 0 15px 15px;
border:1px solid rgba(0,0,0,0.6);
border-top:none;
padding:6px;
letter-spacing:2px;
position:relative;
z-index:100;
box-shadow:-2px 2px 4px 1px rgba(0,0,0,0.3);
-webkit-box-shadow:-2px 2px 4px 1px rgba(0,0,0,0.3);
}
#zoe-tab {
background:#3d3d3d;
margin:0px 15px;
border-radius:0 0 15px 15px;
-moz-border-radius:0 0 15px 15px;
-o-border-radius:0 0 15px 15px;
border:1px solid rgba(0,0,0,0.6);
border-top:none;
padding:6px;
position:relative;
z-index:15;
box-shadow:-2px 2px 4px 1px rgba(0,0,0,0.3);
-webkit-box-shadow:-2px 2px 4px 1px rgba(0,0,0,0.3);
}
#blabel-tab:hover, #zoe-tab:hover {
background:rgba(0,0,0,0.9);
}
#folder-placeholder {
width:960px;
height:275px;
margin:-26px auto;
background:#000;
position:absolute;
z-index:-1;
}
#folder-black {
width:960px;
background:#eee;
margin:-30px auto;
border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
}
#folder-zoe {
width:960px;
margin:0 auto;
background:#ccc;
position:relative;
top:4px;
z-index:1;
border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
}
#zoe {
position:relative;
z-index:20;
}
And this jQuery:
function blabel_init() {
$("#folder-black").show().animate({
"height" : "300px"
},600);
$("#blabel-tab").animate({
"top" : "295px"
},{
duration: 600,
complete: function() {
$("#blacklabel").fadeIn();
}
});
}
function blabel_switch() {
$("#zoe-tab").click(function() {
$("#blacklabel").fadeOut().promise().done(function() {
$("#folder-black").animate({
"height" : "0"
});
$("#blabel-tab").animate({
"top" : "0"
}).promise().done(function() {
$("#folder-zoe").animate({
"height" : "300px"
});
$("#zoe-tab").animate({
"top" : "300px"
},{
complete:function() {
$("#zoe").fadeIn();
}
});
});
});
return false;
});
}
function zoe_switch() {
$("#blabel-tab").click(function() {
$("#zoe").fadeOut().promise().done(function() {
$("#folder-zoe").animate({
"height" : "0"
});
$("#zoe-tab").animate({
"top" : "0"
}).promise().done(function() {
$("#folder-black").animate({
"height" : "300px"
});
$("#blabel-tab").animate({
"top" : "295px"
},{
complete:function() {
$("#blacklabel").fadeIn();
}
});
});
});
return false;
});
}
Any help would be hugely appreciated!
It can be seen at zoewheels.com/beta.

Answer 1

i think it is because of href="#"
try replacing with href="javascript:void(0)" . Also if href is not needed remove it