jQuery show() is not showing with slide effect

Question

I want to hide and show an article element using slide effect.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 article immediately without slide effect.

Here is show and hide code + html + vanished CSS:

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:

.vanished{
    display: none;
}

Answer 1

this is before the hide/show: so it shows as a block, at that point.

 hidden.css("display","inline-block");

I would just put CSS in for that, then delete those lines.