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