Search code examples
jqueryhtmlcsstransitionsmoothing

jQuery slider (fadeIn / fadeOut) not working correctly

i've made a jquery slider and a user in this website helped me to improve it (adding fade transitions). In the fiddle it worked fine, but when i moved it to my computer it generated a problem, first of all, here is the fiddle.

http://jsfiddle.net/CWkQE/14/

Code is really simple, i hide images with display: none (hide class) and change that with fadeIn/ fadeOut.

$("active image").fadeIn();
$("to hide image").fadeOut();
$("to hide image").fadeOut();
$("to hide image").fadeOut();

and here is the problem

enter image description here

(IT'S A GIF so it may take some time to load, if it does not, here's the link: http://images.ezgif.com/tmp/gif_300x341_e373a4.gif

it's speeded up just for size reasons so if you can't see the problem, when you click a button the current image desappear and just 100 miliseconds later aprox. the other image loads.

I've tried with .delay() but it didn't work either.

Solution

  • html

    <div id="cycler" style="position:fixed;top:0;">
        <img class="active" src="http://www.gettyimages.com/CMS/StaticContent/1357941082241_new_banner-700x465.jpg" alt="Hoverfly on a green leaf" title="Hoverfly on a green leaf" width="506" height="337" />
        <img src="http://www.royaltyfreeimages.net/wp-content/uploads/2010/09/royalty-free-images-mushroom-500x375.jpg" alt="Fly on a pink flower" title="Fly on a pink flower" width="506" height="337"  />
        <img src="http://www.menucool.com/slider/prod/image-slider-1.jpg" alt="Insect on a leaf" title="Platycheirus granditarsus (I think) on a leaf" width="506" height="337"  />

    </div>
    <div style="margin-top:350px;">
    <button onclick="cycleImages(1)">1</button>
    <button onclick="cycleImages(2)">2</button>
    <button onclick="cycleImages(3)">3</button>
</div>

    css

    #cycler{position:relative;}
#cycler img{position:absolute;z-index:1;background-color:white}
#cycler img.active{z-index:3}

    script

    function cycleImages(n){
      var $active = $('#cycler .active');
      var $next = $('#cycler img:nth-child('+n+')');
      $next.css('z-index',2);
      $active.fadeOut(1500,function(){
          $active.css('z-index',1).show().removeClass('active');
          $next.css('z-index',3).addClass('active');
      });
    }

    fiddle http://jsfiddle.net/vishnurajv/7wPbd/

    If you are looking for a flexible slide I prefer flexslider