jQuery animate queue:true happening simultaneously

Question

I have been hammering at this code trying every which way to get my animations to happen one at a time but they both animate at the same time. FYI I am not using any CSS transitions so that would not be a factor in this case.

Here is the code:

Javascript:

   $('#event-card-container2').animate({opacity: '0'}, {duration:600, queue: true})
   $('#event-card-container1').animate({opacity: '0'}, {duration:600, queue: true})

Html:

    <!--start event -->
            <div id="event-card-container1">
              <div class="event-card-grid">
                <div class="event-image">
                    <img id="eventImg1" src="#" />
                </div>
                <div></div>
                <div class="event-card-info">
                    <div></div>
                    <div>
                        <div id="heading1" class="event-heading">

                    </div>
                    <br />
                    <div id="details1" class="event-details">

                    </div>
                    <br />
                    <a id="btnMoreInfo1" class="btnMoreInfo" href="#" target="_blank"><div class="btn-more-info">
                        MORE INFO <i class="arrow right"></i>
                    </div></a>
                    </div>
                <div></div>
                </div>
              </div>
            </div>
            <!--event end-->
            <div></div>
            <!--start event -->
            <div id="event-card-container2">
              <div class="event-card-grid">
                <div class="event-image">
                    <img id="eventImg2" src="#" />
                </div>
                <div></div>
                <div class="event-card-info">
                    <div></div>
                    <div>
                        <div id="heading2" class="event-heading">

                    </div>
                    <br />
                    <div id="details2" class="event-details">

                    </div>
                    <br />
                    <a id ="btnMoreInfo2" class="btnMoreInfo" href="#"><div class="btn-more-info" target="_blank">
                        MORE INFO <i class="arrow right"></i>
                    </div></a>
                    </div>
                <div></div>
                </div>
              </div>
            </div>
            <!--event end-->

Styles:

    CSS------

    #event-card-container1 {
        margin: 20px;
        background-color: #fff0ea;
        opacity: 0;
    }

    #event-card-container2 {
        margin: 20px;
        background-color: #fff0ea;
        opacity: 0;
    }

I should point out the css indicates opacity on the divs is set to 0 initially; I fade up the boxes to opacity:1 when the divs are in the viewport upon scrolling... so they are in fact visible when I am trying to fade them back out opacity:0 upon a button click. I just want them to fade out one at a time, which they are not.

Thank you for any thoughts.