Change scripts appearing animation

So I have a simple script and I decided to change its appearance animation. At the moment one item displays, goes up then, and the next item appears below it, etc. I've broke my head trying to understand how can I change its appearance - a simple fade in / fade out effect so that the items remain in place and do not leave up.

var newSale = jQuery.noConflict();
function newSaleEnter(child){
  newSale(".new-sale:nth-child("+child+")").animate({ top:"0px", opacity:"0.2" });
  newSale(".new-sale:nth-child("+child+")").animate({ top:"0px", opacity:"1" });
}
function newSaleOut(){
  newSale(".new-sale").animate({ opacity:"0" });
  newSale(".new-sale").animate({ top:"600px" });
}
function newSalePlay(){
  setTimeout(function(){newSaleEnter(1);}, 1000);
  setTimeout(function(){newSaleEnter(2);}, 5000);
  setTimeout(function(){newSaleEnter(3);}, 8000);
  setTimeout(function(){newSaleEnter(4);}, 10000);
  setTimeout(function(){newSaleOut();}, 16000);
}
newSale(document).ready(function(){
  newSalePlay();
  setInterval(function(){newSalePlay();}, 16500);
});

.new-sale p {
    display: block;
    margin: 0;
    line-height: 1.2;
    margin-top: 3px;
    font-weight: 300;
    font-size: 16px;
}
.new-sale span {
    color: #b6b6b6;
}
.new-sale img {
    float: left;
    border-radius: 50px;
    margin-right: 10px;
}

.new-sale__pseudo-container {
    height: 500px;
    display: block;
    margin-top: 290px;
}
.new-sale-container {
    padding: 40px;
    height: 500px;
    margin-top: -650px;
    overflow: hidden;
}
.new-sale-container .new-sale {
    top: 600px;
    opacity: 0;
    background: #DEDEDE;
    max-width: 270px; 
    margin-bottom: 28px;
    border-radius: 10px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 5px 5px 22px -8px rgba(0,0,0,.42);
    border-radius: 10px;
    padding: 10px;
}
.new-sale-container .new-sale.left {
    float: right;
    clear: both;
    margin-right: -20px;
}
.new-sale-container .new-sale.right {
    float: right;
    clear: both;
    margin-right: -20px;
}

@-webkit-keyframes scale {
  0% { 
  }
  100% {
 	 -webkit-transform: scale(1.1);
  }
}
@keyframes newSaleDots {
  0% {
    top: 0px;
  }
  50% {
    top: -4px;
  }
  100% {
    top: 0px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="new-sale__pseudo-container"></div>
<div class="new-sale-container">
  <div class="col-xs-12 col-md-4 col-md-push-4">
    <div class="new-sale left">
        <p><b>Title #1</b> item description#1 <span>3 min</span> </p>
    </div>
    <div class="new-sale left">
        <p><b>Title #2</b> item description#2 <span>2 min</span> </p>
    </div>
    <div class="new-sale left">
         <p><b>Title #3</b> item description#3 <span>1 min</span> </p>
    </div>
    <div class="new-sale left">
        <p><b>Title #4</b> item description#4 <span>30 sec</span> </p>
    </div>
  </div>
</div>