Javascript 滑动前元件短暂闪烁，干扰滑块的平滑度

我一直在制作我自己版本的滑块，有许多不同的迭代，我觉得我几乎达到了我想要的功能

以下是滑块的演示：

代码：

HTML:

jQuery：

$.fn.slideIt = function(desc){
  var slider = $(this);
  var slides = slider.find('li');
  slides.each(function(a,b){
    $(this).attr('data-slide',a);
    if(a == 0){
      $(this).addClass('active');
    }
    if(a > 0){
      $(this).addClass('inactive');
    }
  });

  var ua = navigator.userAgent;
  var events = (ua.match(/iPad/i)) ? 'touchstart' : 'click';
  slider.find('.arrows')
            .on(events,function(e){
    if($(this).hasClass('left')){
      slider.find('.active')
                .slideLeft(slider);
      /*slider.find('.active')
                .slideDown(slider);*/
    }
    if($(this).hasClass('right')){
      slider.find('.active')
                .slideRight(slider);
      /*slider.find('.active')
                .slideUp(slider);*/
    }
    slider.slideInfo(desc);
  });
}

$.fn.slideLeft = function(slider){
  var slide = $(this);
  slide.css({'left':'0'});
  slider.find('li:not(.active)')
            .css({'left':'-100%'});

  var next = slide.prev('li');
  if(
    parseInt(slide.attr('data-slide'))
        <=
    0
  ){
    next = slider.find('li')
                         .last();
  }

  slide.stop()
         .animate({'left':'100%'},600)
         .css({'left':'-100%'});
  next.stop()
        .animate({'left':'0'},600);

  slide.removeClass('active')
         .addClass('inactive');
  next.removeClass('inactive')
        .addClass('active');
}

$.fn.slideRight = function(slider){
  var slide = $(this);
  slider.find('li:not(.active)')
            .css({'left':'100%'});
  slide.css({'left':'0'});

  var next = slide.next('li');
  if(
    parseInt(slide.attr('data-slide')) + 1
        >= 
    slider.find('li').length
  ){
    next = slider.find('li')
                         .first();
  }

  slide.stop()
         .animate({'left':'-100%'},600)
         .css({'left':'100%'});
  next.stop()
        .animate({'left':'0'},600);

  slide.removeClass('active')
         .addClass('inactive');
  next.removeClass('inactive')
        .addClass('active');
}

$.fn.slideUp = function(slider){
  var slide = $(this);
  slider.find('li:not(.active)')
            .css({'top':'-100%'});
  slide.css({'top':'0'});

  var next = slide.next('li');
  if(
    parseInt(slide.attr('data-slide')) + 1
        >= 
    slider.find('li').length
  ){
    next = slider.find('li')
                         .first();
  }

  slide.stop()
         .animate({'top':'100%'},600)
         .css({'top':'-100%'});
  next.stop()
        .animate({'top':'0'},600);

  slide.removeClass('active')
         .addClass('inactive');
  next.removeClass('inactive')
        .addClass('active');
}

$.fn.slideDown = function(slider){
  var slide = $(this);
  slide.css({'top':'0'});
  slider.find('li:not(.active)')
            .css({'top':'100%'});

  var next = slide.prev('li');
  if(
    parseInt(slide.attr('data-slide'))
        <=
    0
  ){
    next = slider.find('li')
                         .last();
  }

  slide.stop()
         .animate({'top':'-100%'},600)
         .css({'top':'100%'});
  next.stop()
        .animate({'top':'0'},600);

  slide.removeClass('active')
         .addClass('inactive');
  next.removeClass('inactive')
        .addClass('active');
}

$.fn.slideInfo = function(el){
  var alt = $(this).find('.active img')
                                 .attr('alt');
  var title = $(this).find('.active img')
                                     .attr('title');
  $(el).find('.title')
         .text(title);
  $(el).find('.description')
         .text(alt);
}

$(document).ready(function(){
  $('.slider').slideIt('.picture-description');
  $('.slider').slideInfo('.picture-description');
});

出于某种原因，元素在每次转换前都会闪烁一毫秒，在切换制表符等时，它不会立即执行操作，即它会空白一秒钟，然后切换到下一张幻灯片

---

我不知道为什么会发生这种情况，如果有任何帮助，我将不胜感激

问题似乎在于使用jquery css和动画的组合。将其全部更改为动画，例如：

  slide.stop()
         .animate({left:'100%'},600,
                function(){
                                slide.animate({left:'-100%'},0);
                            });
  next.stop()
        .animate({'left':'0'},600);

而不是

  slide.stop()
         .animate({'left':'100%'},600)
         .css({'left':'-100%'});
  next.stop()
        .animate({'left':'0'},600);

---

您是否尝试过使用CSS转换而不是JQuery？看起来你是在混合使用这两种语言，不过到目前为止，我只是对代码做了一个简短的浏览。我用它来制作按钮和幻灯片的排列，但实际上是为了制作幻灯片，因为我想要转换，尽管没有flash，我使用jQuery，添加和删除的类是为了便于遍历，没有添加或删除样式，z索引只在那里，因为我认为出于某种原因，它可能会在转换时在上面闪烁，但显然不是。此外，我不确定如何使用单独的css转换来实现这一点。我可以在一点时间内将一些内容组合在一起。基本上，您只需要使用JQuery从div中添加/删除类并更新标题。您可以将实际的转换内容留给CSS。我会在CodePen上写一些东西，今天晚些时候发布。嗯，我可能没有时间重构它并得到一个好的解决方案，但这里有一篇关于我做过的类似事情的博客文章。它不做任何媒体查询的工作，但基本上它的结构允许我添加任意数量的图像并在其中旋转。你可以修改它来完成你在这里所做的事情，根据箭头函数旋转，简单地将下一个和上一个状态设置为溢出中的隐藏位置，然后修改函数中的标题。

  slide.stop()
         .animate({left:'100%'},600,
                function(){
                                slide.animate({left:'-100%'},0);
                            });
  next.stop()
        .animate({'left':'0'},600);

  slide.stop()
         .animate({'left':'100%'},600)
         .css({'left':'-100%'});
  next.stop()
        .animate({'left':'0'},600);