Jquery，乘以分离的图像动画

Question

我是这个论坛和jQuery的新手。我已经尝试过寻找答案，但却找不到合适的答案。

我试图获得一个动画，当你点击它时，图像会发生变化。现在可以使用，但是当你点击它时，所有27个图像同时改变 。我希望他们按顺序更改 。

我的剧本：

<script>
    $(document).ready(function () {
        //*$('.coke_regular').hide();
        $('.coke_light').hide();
        $('.coke_zero').hide();
        $('.coke_life').hide();

        $('.coke_regular').click(function () {
            $('.coke_light').fadeIn(400);
        });

        $('.coke_light').click(function () {
            $('.coke_zero').fadeIn(400);
        });

        $('.coke_zero').click(function () {
            $('.coke_life').fadeIn(400);
        });
    });
</script>

div＆amp; amp;＆amp;课程:(请注意图像重复27次，共4次）

    <div class="coke_regular">
      <div id="regular">
        <img src="img/regular.png" align="top" class="regular" height="180px" />
      </div>

     <div class="coke_light">
       <div id="light">
         <img src="img/Light.png" align="top" class="light" height="180px" />
       </div>

       <div class="coke_zero">
         <div id="zero">
           <img src="img/zero.png" align="top" class="zero" height="180px" />
         </div>

         <div class="coke_life">
           <div id="life">
             <img src="img/life.png" align="top" class="life" height="180px" />
         </div>