Edit in JSFiddle

var hoveredElement = null;

function tick() {
  $('.ticker').filter(function(item) {
    return !$(this).is(hoveredElement)
  }).each(function() {
    $(this).find('li:first').slideUp(function() {
      $ticker = $(this).closest('.ticker');

      $(this).appendTo($ticker).slideDown();
    });
  });
}
setInterval(tick, 5000);


$(function() {
  $('.ticker').hover(function() {
    hoveredElement = $(this);
  }, function() {
    hoveredElement = null;
  });
});

<div>
  <ul class="ticker">
    <li><span>News &raquo;</span> Post one : Name of your acricle..1</li>
    <li><span>News &raquo;</span> Post one : Name of your acricle..1</li>
    <li><span>News &raquo;</span> Post Two : Name of your acricle..2.</li>
  </ul>
</div>

/*--------------------------------------------------------------
# News Ticker 
--------------------------------------------------------------*/

.ticker {
  height: 42px;
  overflow: hidden;
  line-height: 38px;
}

ul.ticker li span {
  background-color: #FF5656;
  border-right: 1px solid #fff color: #FFF;
  margin-right: 6px;
  font-size: 20px;
  padding: 10px 25px 10px 30px;
}

.ticker a:hover,
.ticker li:hover {
  color: #D8D8D8;
}

.ticker a,
.ticker li {
  color: #ffffff;
  font-size: 15px;
  background: #333;
  list-style: none;
}