Question

my problem is in my website,when I load the page and click Home,if article is visible on screen, the js I’ve written hides it smoothly and great with no problem.but when I click the About Us Link,it shows the article but with broken css position while its act is finished.

here is the code:

HTML:

<nav>
    <ul class="sf-menu sf-vertical">
        <li><a href=# onclick=home()>Home</a></li>
        <li><a href=#about onclick=about()>About Us</a></li>
        <li><a href=#>Cuisines</a>
            <ul>
                <li><a href=#starters>Starters</a></li>
                <li><a href=#>Main Dishes</a></li>
                <li><a href=#>Desserts</a></li>
                <li><a href=#>Mezes</a></li>
            </ul>
        </li>
        <li><a href=#>Wine List</a></li>
        <li><a href=#gallery>Gallery</a></li>
        <li><a href=#contacts>Contacts</a></li>
    </ul>
</nav>

<article class=vanished id=about>
    <h1>About Us</h1>
    <div class="main-wrapper scroll">
        <div class="wrapper clearfix">
            <img src=img/bazar-place.png alt=bazar-place width=222 height=150 class=about-img>
            <h4>Our Restaurant</h4>
            <p>Bazar is a restaurant located between the districts Haga and Vasastaden in Gothenburg with a focus on Turkish and Persian food of the best quality that creates opportunities for an exciting mix all the way, from appetizer to dessert.</p>
        </div>
        <div class="wrapper clearfix">
            <img src=img/belly.jpg alt=belly-dancing width=222 height=167 class=about-img id=belly>
            <h4>Events</h4>
            <p>Every Saturday from 21, we have Belly dancing at Bazar.</p>
        </div>
        <div class="wrapper clearfix">
            <img src=img/food.jpg alt=food-services width=222 height=167 class=about-img id=food>
            <h4>Food Services</h4>
            <p>Taste our famous pasta dish to the human price of 69 :- We offer 10% discount for take-away at our entire menu.</p>
            <p>At lunchtime you can choose from three Turkish pasta dishes or among two or three different main dishes. Ask about vegetarian options! Drinking, salad and coffee / tea included. Lunch can also be picked up.</p>
        </div>
        <div class="wrapper last clearfix">
            <img src=img/extra.jpg alt=extra-services width=222 height=167 class=about-img id=extra>
            <h4>Extra Services</h4>
            <p>We can help with everything from after work, kick-off to the birthday called with food and drink that lasts all night. Do you want more entertainment we can arrange live music and belly dancing.</p>
        </div>
    </div>
</article>

JAVASCRIPT:

function home(){

    if ($(".active") == [])
    {
        return ;
    }
    else
    {
        var active = $(".active");
        active.css("display","inline-block");
        active.hide("slide",{direction:"left"},700);
        active.attr("class","vanished");

    }
}
function about(){
    if ($(".active") == [])
    {
        var hidden = $("#about");
        hidden.css("display","inline-block");
        hidden.show("slide",{direction : "right"},700);
        hidden.attr("class","active");
    }
    else
    {
        if ($("#about").attr("class") == "active")
        {
            return ;
        }
        else
        {
            var active = $(".active");
            active.css("display","inline-block");
            active.hide("slide",{direction:"left"},700);
            active.attr("class","vanished");
            var hidden = $("#about");
            hidden.css("display","inline-block");
            hidden.show("slide",{direction : "right"},700);
            hidden.attr("class","active");
        }

    }
}

CSS:

article{
    position: absolute;
    width: 550px;
    height: 100%;
    background-image: url("../img/blockBG.png");
    z-index: 1;
    left: 235px;
    border-left: 1px solid #4A4A4A;
    border-right-color: #7b7b7b;
    border-right-style: solid;
    border-right-width: thick;
    padding-right: 40px;
    padding-left: 40px;
    text-align: center;

}

.vanished{
    display:none;
}

.main-wrapper{
    position:relative;
    z-index:1;
    width: 100%;
    height: 590px;
    display:block;
}

.wrapper{
    border-bottom:1px solid #4A4A4A;
    margin-bottom: 15px;
}

.last{
    border: none;
}

h4{
    color: #efefef;
    text-decoration: none;
    text-align: left;
    font-family:'Yeseva One',cursive;
    font-size: 17px;
    font-weight: normal;
    margin-bottom: 10px;
    margin-top: 0;
    line-height: 19px;
}

h1{
    position: relative;
    font-family:'Yeseva One',cursive;
    font-size:60px;
    z-index: 2;
    color: white;
    margin-top: 90px;
    padding-bottom: 41px;
    margin-bottom: 20px;
    font-weight: normal;
    border-bottom:1px solid #4A4A4A;
}

p{
    color: #efefef;
    text-decoration: none;
    text-align: left;
    font-family:Arial, sans-serif;
    font-size: 12px;

}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

Answer 1

The problem is with the <h1> margin-top only being correctly applied at the end of the animation.

Try turning the distance top into a padding instead of margin, it should fix it:

h1{
    position: relative;
    font-family:'Yeseva One',cursive;
    font-size:60px;
    z-index: 2;
    color: white;
    margin-top: 0;
    padding-top: 90px;
    padding-bottom: 41px;
    margin-bottom: 20px;
    font-weight: normal;
    border-bottom:1px solid #4A4A4A;
}

Alternatively, you could give the parent <article> a padding or border top. This will prevent the <h1> margin from collapsing outside it’s container while the animation runs.