JQuery Text Slider

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<body>
  <div id="text_slider">
    <div>
      <p>First Text</p>
    </div>
    <div>
      <p>Second Text</p>
    </div>
    <div>
      <p>Third Text</p>
    </div>
  </div>
</body>

CSS

#text_slider {
   width: 600px;
   height: 300px;
   margin: 100px auto;
   box-shadow: 0 0 5px 5px #000;
 }
 
 #text_slider div {
   position: absolute;
 }
 
 #text_slider p {
   margin: 20px;
   font-size: 30px;
 }

JavaScript

$(document).ready(function() {
   $("#text_slider div:gt(0)").hide();
   setInterval(function() {
     $("#text_slider div:first")
       .fadeOut(500).next().fadeIn(500).end().appendTo("#text_slider");
   }, 2000);
 });