Javascript / JQuery Hide and Show

For some reason hide and show jQuery doesn't work. This seems to work, but the elements are not showing on the page. Maybe it could be the parent with a relative position or display it, but I can't find anything. The code is shown below:

HTML:

<div id="newsItem1">
    <h4><a href="/news">News Title 1</a></h4><h4>April 6, 2015</h4>
    <p>Text here</p>
</div>

<div id="newsItem2">
    <h4><a href="/news">News Title 1</a></h4><h4>April 6, 2015</h4>
    <p>Text here</p>
</div>

      

        
        
        
      

    

CSS

#newsItem1, #newsItem2 {
    display:none;
}

      

        
        
        
      

    

JS:

 setInterval(NextNewsItem, 8000);
 var newsItem = 0;
 var numNewsItems = 2;

 function NextNewsItem() {
     newsItem++;

     if (newsItem > numNewsItems) {
         newsItem = 1;
     }

     console.log(newsItem);

     for (i = 1; i <= numNewsItems; i++) {
         console.log($("#newsItem" + i).css('display'));
         $("#newsItem" + i).hide();
         console.log($("#newsItem" + i).css('display'));
     }

     console.log($("#newsItem" + newsItem).css('display'));
     $("#newsItem" + newsItem).show();
     console.log($("#newsItem" + newsItem).css('display'));
 }

      

        
        
        
      

    

The first iteration shows:

1

no one

no one

no one

no one

no one

block