Добавление перехода к непрозрачности делений с использованием jQuery и CSS

Question

var slideIndex = 0;
carousel();

function carousel() {
  var x = $("#slideshow div");
  // var y = $("#slideshow div img");                  
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none"; 
    x[i].style.opacity = "0";
  }
  slideIndex++;
  if (slideIndex > x.length) 
    {slideIndex = 1;}

  x[slideIndex-1].style.display = "block";
  x[slideIndex-1].style.opacity = "1";
  setTimeout(carousel, 4000);
}

Это функция, которая выбирает все деления идентификатора «слайд-шоу», а затем изменяет непрозрачность всех делений на 0 и не отображает ничего. Затем он изменяет отображение деления slideIndex на блокирование и непрозрачность до 1.

В CSS я добавил переход для непрозрачности, равный 2 с.

#slideshow div {
  -webkit-transition: opacity 1s linear;
  -moz-transition: opacity 1s;
  -ms-transition: opacity 1s;
  -o-transition: opacity 1s;
   transition: opacity 2s;
  /*-webkit-transition: display 1s linear;*/
}

Но деления появляются одно за другим один без какого-либо перехода непрозрачности. Что нужно сделать здесь? Спасибо!