Jquery function only works with setInterval but not with $(document).ready

$(document).ready(function(){
    var $exp1 = $("#exp1");
    var $hackp =$("#hack-expanded-details div p");
    if($exp1.is(":hover")) {
      $exp1.animate({height:"14em"},200);

    }
    else {
       $exp1.animate({height:"8em"},200);

    }
});

#experience
{
    padding-top:3em;
}
#exp-heading
{

    margin-top:3em;
    background-color:rgba(0, 113, 255, 1);
    width:22em;
    height:3.5em;



}
#exp-heading h3
{
    padding-top:.5em;
    color:#FFF;

}
#exp-heading  i
{
    padding-left:1.5em;
    padding-right:3px;
    color:#FFF;
}
#exp1
{
    background-color:#FFF;
    border:2px solid rgba(0, 113, 255, 1);
    color:#000;
    width:30em;
    margin-top:3em;
    margin-left:9em;
    height:8em;
    border-radius:4px 4px 4px 4px;
}

#hackathon h3 
{
    text-align:center;

}
#hackathon h4
{
    text-align:center;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="experience">
                    <div id="exp-heading">
                    <h3><i class="fa fa-laptop"></i>Experience</h3>
                    </div>

                        <div id="exp1">
                            <div id="hackathon">
                                <h3>GlobalHack IV</h3>
                                <h4>Front-End Developer</h4>
                                <p><span class="italic"> CIC St. Louis, Missouri</span></p>
                            </div>
                            <div id="hack-expanded-details">

                            </div>
                        </div>

it doesn't work. Any ideas?

It did work with setInterval but no clean and setInterval is not what I wanted to use anyways I updated the snippet sorry I am posting for the first time on here so far I never needed too. I am also not unfamiliar with coding that's why this a big mystery for me why it all of the sudden is not working