jquery - Javascript/CSS slideshow: Using transparencies highlights flaws I don't know how to fix -

as i'd love have broad possible future coders, rather specific problem.

as can see in this jsfiddle, slideshow seems have issue pictures transparencies. transparencies, there jarring transition. if possible, i'd have old picture fade out new picture fading in.

and note: slideshadow div there reason, box-shadow uses greater control on z-index.

html:

<div id="slideshow">    <img class="active" src="http://i.imgur.com/tqmy9wn.png" alt="" />    <img src="http://i.imgur.com/vnyefb0.png" alt="" />    <div id="slideshadow">&nbsp;</div> </div> 

css:

#slideshow {     position:relative;     float:left;     height:245px;     width:200px; }  #slideshow img {     position:absolute;     top:0;     left:0;     z-index:8;     opacity:0.0; }  #slideshow img.active {     z-index:10;     opacity:1.0; }  #slideshow img.last-active {     z-index:9; }  #slideshadow {     position:absolute;     height:245px;     width:200px;     box-shadow:inset 0px 0px 80px 0px rgba(0,0,0,0.75);     z-index:15; } 

js:

  function slideswitch() {     var $active = $('#slideshow img.active');      if ($active.length == 0) $active = $('#slideshow img:last');      var $next = $active.next('img').length ? $active.next('img') : $('#slideshow img:first');      $active.addclass('last-active');      $next.css({         opacity: 0.0     })         .addclass('active')         .animate({         opacity: 1.0     }, 2000, function () {         $active.removeclass('active last-active');     }); }  $(function () {     setinterval(slideswitch, 7000); }); 

adding explicit fade transparent seems work:

$active.animate({     opacity: 0.0 }, 2000); 

http://jsfiddle.net/tbyccesq/