jQuery fadeIn fadeOut not workiing in Chrome or iPad

jQuery fadeIn fadeOut not workiing in Chrome or iPad

I have 3 tabs on a page that hide or show 3 different Div tags contained on the page.

The script works fine in Firefox, but not in Chrome, Safari or the iPad.  It looks very clean and direct to me, so I am not sure why it's failing. 

I am grateful for any guidance that can be provided. 


jQuery:


    $(document).ready(function(){

        $('#publications').hide();
        $('#students').hide();


        $('#cv-nav').click(function(){
            $("#vitae").fadeIn();
            $("#publications").fadeOut(200);
            $("#students").fadeOut(200);
            return false;
        });

        $('#pub-nav').click(function(){
            $("#vitae").fadeOut(200);
            $("#publications").fadeIn();
            $("#students").fadeOut(200);
            return false;
        });

        $('#students-nav').click(function(){
            $("#vitae").fadeOut(200);
            $("#publications").fadeOut(200);
            $("#students").fadeIn();
            return false;
        });

    });



HERE ARE THE TABS IN THE HTML MARKUP

    <ul id="about-tab-bar" class="about-tab-bar">
        <li><a class="tab-link-active" id="cv-nav" href="#">Curriculum Vitae</a></li>
        <li><a class="tab-link" id="pub-nav" href="#">Publications</a></li>
        <li><a class="tab-link" id="students-nav" href="#">Students</a></li>
    </ul>


THE DIV TAGS ARE NAMED AS FOLLOWS

<div id="vitae"> content </div>

<div id="publications"> content </div>

<div id="students">  content </div>