Ползунок jQuery (fadeIn/fadeOut) работает неправильно

Я сделал слайдер jquery, и пользователь на этом веб-сайте помог мне его улучшить (добавляя плавные переходы). В скрипке он работал нормально, но когда я перенес его на свой компьютер, возникла проблема, прежде всего, вот скрипка.

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

Код действительно прост, я скрываю изображения с помощью display: none (скрыть класс) и изменяю это с помощью fadeIn/fadeOut.

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

и вот проблема

введите здесь описание изображения

(ЭТО GIF, поэтому загрузка может занять некоторое время, если нет, вот ссылка: http://images.ezgif.com/tmp/gif_300x341_e373a4.gif

он ускорен только из соображений размера, поэтому, если вы не видите проблему, при нажатии кнопки текущее изображение исчезает и всего через 100 миллисекунд примерно. загружается другое изображение.

Я пробовал с .delay(), но это тоже не сработало.


html jquery css transitions smooth
person nick    schedule 21.04.2014    source источник
comment
Так это работает на скрипке, но не на вашем сайте? Проверяли консоль на ошибки?   -  person j08691    schedule 21.04.2014
comment
Как я могу это сделать? извините, я совсем новичок   -  person nick    schedule 21.04.2014
comment
@nick Если вы в Chrome, нажмите F12. Нажмите на вкладку под названием консоль. Если есть ошибки, они будут красными.   -  person MiniRagnarok    schedule 22.04.2014

Ответы (1)


arrow_upward
1
arrow_downward

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}

сценарий

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');
      });
    }

скрипка http://jsfiddle.net/vishnurajv/7wPbd/

Если вам нужен гибкий слайд, я предпочитаю flexslider.

person Vishnuraj V    schedule 21.04.2014
comment
спасибо, это сработало нормально, но есть способ сделать его отзывчивым? я пытался, но закончил тем, что сломал ползунок - person nick; 22.04.2014
comment
flexslider.woothemes.com — это то, что вам нужно. Отметьте как ответ, если это было полезно. :) - person Vishnuraj V; 22.04.2014
comment
проверьте этот stackoverflow. ком/вопросы/11559209/ - person Vishnuraj V; 22.04.2014