jQuery - 定期交换图像和文本

Question

我有两个图像及其相应的文本在两列中。现在，我有一张图片淡入淡出，文字同时淡入淡出。我希望文本淡出并且图片淡出，每四秒钟，并让其他图片和文本自动淡入。如何实现这个动画？我怀疑我可能需要添加一个数据结构，可能是一个队列（因为它将进入和退出的方式）。

使用的动画来自animate.css

HTML：

    <div class="group">
       <div class="left">
          <img src="images/the_principal.jpg" alt="school principal" class="admin-pic">
          <!--<img src="images/mrs-cooke.png" alt="school vice principal" class="admin-pic">-->
       </div>
       <div class="right">
           <p class="text">
            "Education is a simple yet a serious process. It is a process of making a human being into 'being human'.Stress at our institution is on this aspect.<br>I invite you to join us and make our country proud
                            <br><br>-The Principal"
           </p>

           <!--<p>
                        "We are all Indians firstly and lastly. Whatever anyone else might say, we need to uphold this God-given identity
                        through our actions, thoughts and what we might say.<br>Long live the Indian Republic.
                        <br><br>-The Vice Principal "
           </p>-->
       </div>
   </div>

第二张图片和文字被注释掉了。

jQuery的：

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

$('.offscreen-logo').addClass('come-in-logo').one(animationEnd,function(){
      $('.right .text').addClass('animated fadeInUp');
      $('.left .admin-pic').addClass('animated fadeInDown');
 });