jQuery slider with fade not changing image

Am trying to create a simple JQuery Slider. And each time only one picture should be visible. And after x seconds a new image shoud fade in. Only the problem is that the images are not displayed and lingers at the first picture. Maybe someone can help me with this.

Code so far: HTML

 <div id="slideshow">
    <span>
        <div class="vHolder">
            <img src="http://lorempixel.com/150/150/" alt="Slideshow Image 1" class="active" /> 
        </div>
    </span>
    <span>
        <div class="vHolder">
            <img src="http://lorempixel.com/150/150/" alt="Slideshow Image 2" />
        </div>
    </span>
    <span>
        <div class="vHolder">
            <img src="http://lorempixel.com/150/150/" alt="Slideshow Image 3" />
        </div>
    </span>
    <span>
        <div class="vHolder">
            <img src="http://lorempixel.com/150/150/" alt="Slideshow Image 4" />
        </div>
    </span>
</div>

JS:

function slideSwitch() {
    var $active = $('#slideshow img.active');

    if ( $active.length == 0 ) $active = $('#slideshow img:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow img:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 2500 );
});

And my working jsfiddle: http://goo.gl/4AvUcr

Your slider is not working because you are using next in the wrong way: next is a sibling selector so the next sibling for the img is going to be itself as there are no other elements in the div with the image.

If you change your code to remove the span tags wrapping the divs (not sure why you have these and it is invalid code), you can use the following:

function slideSwitch() {
  var $active = $('#slideshow .active');

  if ($active.length == 0) $active = $('#slideshow > div:last');

  var $next = $active.next().length ? $active.next() : $('#slideshow > div:first');

  $active.addClass('last-active');

  $next.css({
      opacity: 0.0
    })
    .animate({
      opacity: 1.0
    }, 1000, function() {
      $next.addClass('active')
    });

  $active.css({
      opacity: 1.0
    })
    .animate({
      opacity: 0.0
    }, 1000, function() {
      $active.removeClass('active last-active');
    });


}

$(function() {
  setInterval("slideSwitch()", 2500);
});

#slideshow {
  position: relative;
  height: 350px;
}

#slideshow .vHolder {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  opacity: 0.0;
}

#slideshow img {
  max-width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideshow">
  <div class="vHolder" class="active">
    <a href="#"><img src="http://lorempixel.com/150/150/city/1" alt="Slideshow Image 1" /></a>
  </div>
  <div class="vHolder">
    <a href="#"><img src="http://lorempixel.com/150/150/city/2" alt="Slideshow Image 2" /></a>
  </div>

  <div class="vHolder">
    <a href="#"><img src="http://lorempixel.com/150/150/city/3" alt="Slideshow Image 3" /></a>
  </div>
  <div class="vHolder">
    <a href="#"><img src="http://lorempixel.com/150/150/city/4" alt="Slideshow Image 4" /></a>
  </div>
</div>