Странно ведет себя слайдер

163

13 апреля 2018, 16:37

Есть слайдер взятый с ссылка на слайдер

8 видов анимации (влево,вправо,вверх,вниз + тоже самое с фейд эффектом)

Но у меня на сайте ведет себя странно - вдруг вместо эффектов анимации картинки просто меняются (т.е как бы отсутствует анимация и замена картинок происходит мгновенно)

Сам слайдер прост как 2 копейки :

<div id="hs_container" class="hs_container">
<div class="hs_area hs_area1">
    <img class="img-responsive hs_visible slide-area-1" src="assets/image/slider/slide1-1.jpg" alt="">
    <img class="img-responsive slide-area-1" src="assets/image/slider/slide1-2.jpg" alt="">
</div>
//Еще 4 секции таких же как 1 отличаются только нумерацией. Т.е hs_area2 итд
</div>

Под всё это JS код

//first preload all images 
$hs_images          = $hs_container.find('img'); 
var total_images    = $hs_images.length; 
var cnt             = 0; 
$hs_images.each(function(){ 
 var $this = $(this); 
 $('<img>').load(function(){ 
  ++cnt; 
  if(cnt == total_images){ 
   $hs_areas.each(function(){ 
    var $area   = $(this); 
    //when the mouse enters the area we animate the current 
    //image (random animation from array animations), 
    //so that the next one gets visible. 
    //"over" is a flag indicating if we can animate 
    //an area or not (we don't want 2 animations 
    //at the same time for each area) 
    $area.data('over',true).bind('mouseenter',function(){ 
     if($area.data('over')){ 
      $area.data('over',false); 
      //how many images in this area? 
      var total  = $area.children().length; 
      //visible image 
      var $current  = $area.find('img:visible'); 
      //index of visible image 
      var idx_current = $current.index(); 
      //the next image that's going to be displayed. 
      //either the next one, or the first one if the current is the last 
      var $next  = (idx_current == total-1) ? $area.children(':first') : $current.next(); 
      //show next one (not yet visible) 
      $next.show(); 
      //get a random animation 
      var anim  = animations[Math.floor(Math.random()*total_anim)]; 
      switch(anim){ 
       //current slides out from the right 
       case 'right': 
        $current.animate({ 
         'left':$current.width()+'px' 
        }, 
        animSpeed, 
        easeType, 
        function(){ 
         $current.hide().css({ 
          'z-index' : '1', 
          'left'  : '0px' 
         }); 
         $next.css('z-index','1'); 
         $area.data('over',true); 
        }); 
        break; 
        //дальше идет переключение кейсов анимации

Грешу на var anim = animations[Math.floor(Math.random()*total_anim)];

Answer 1

Все, извиняюсь, нашел косяк. Если кому интересно ( что вряд ли:) ), то ошибка крылась в том, что я поменял z-index у слайдера. Там где $next.css('z-index','1'); надо было хотя бы 2 оставить. В оригинале там вообще 9999. Но у меня sticky элемент есть с z-index=3, вот и поменял на 1.