title: jQuery slider not displaying effects on first slide load
body: <p>I'm new to jQuery and I have a problem that, I believe, for some of you will be a piece of cake. :)</p>
  
  <p>I created custom a custom image slider which works almost as I wanted it to work except for one thing. Effects that should occur on every slide transition are displayed only after passing through all of the slides. Before that they display instantly - no effect at all.</p>
  
  <p>Here is the <a href="http://jsfiddle.net/5NnPs/" rel="nofollow">JSFiddle</a> link and the code snippet is below.</p>
  
  <pre><code>        $(document).ready(function () {
  
          var slideHovered = null;
          var slideDuration = 7000;
          var slideEffectDuration = 2500;
  
          //Initial hiding of inactive slides - is it actually necessary?
          $('.slide:not(.active)').each(function () {
              $(this).css({
                  "visibility": "hidden"
              });
          });
  
          //Check if mouse is hovering over slider
          setInterval(function () {
              slideHovered = $('.leftContentWrapper').is(":hover");
          }, 500);
  
          //Function to start slideshow
          function startSlides(slideDirection) {
              var slideNumber = $('.slide.active').data('slide');
              var highestSlideNumber = null;
  
              //Function to find highest slide number
              $('.slide').each(function () {
                  var value = parseFloat($(this).attr('data-slide'));
                  highestSlideNumber = (value &gt; highestSlideNumber) ? value : highestSlideNumber;
              });
  
              slideNumber = slideDirection == 'next' ? slideNumber = slideNumber + 1 : slideNumber = slideNumber - 1;
              slideNumber = slideNumber &lt;= 0 ? slideNumber = highestSlideNumber : slideNumber = slideNumber;
              slideNumber = slideNumber &gt; highestSlideNumber ? slideNumber = 1 : slideNumber = slideNumber;
  
              $('.slide.active').removeClass('active').hide();
              $('[data-slide="' + slideNumber + '"]').addClass('active').fadeIn(slideEffectDuration, function () {});
              $('.slide.active').css({
                  'visibility': 'visible'
              });
          }
  
          //Function to change slide every x seconds if there is no hovering over
          setInterval(function () {
              if (slideHovered === false) {
                  startSlides('next');
              } else {
                  return false;
              }
          }, slideDuration);
  
          $('.control').click(function () {
              var slideDirection = $(this).attr('id');
              startSlides(slideDirection);
          });
      });
  </code></pre>
  
  <p>P.S. Any additional code suggestion or advice is appreciated.</p>