Jquery 在上一次/下一次单击几下后，库过渡变得缓慢

我这里有一个JSFIDLE：

如果单击下一个箭头几次，则返回箭头几次，幻灯片过渡将变得缓慢

这是我创建的第一个画廊，它是根据各种答案拼凑而成的，具有以下特点：

允许页面上有多个库 切换全屏模式 从图像中心裁剪/缩放图像 当画廊是英雄的孩子时。迫使画廊的高度适合 但是由于代码是拼凑而成的，我想我不完全理解如何优化事情-我还发现三元if/else也有点令人困惑：

$(function() {

  // set gallery height on load
  galleryHeight();


  // navigation and item fade
  $('div.gallery-nav a').click(function () {

    var buttonIsPrev = $(this).hasClass('gallery-nav-prev') ? 'prev' : 'next';
        gallery = $(this).closest('.gallery');
        currentItem = gallery.find('.gallery-item.active');
        next = currentItem[buttonIsPrev]().length > 0 ? currentItem[buttonIsPrev]() : gallery.find('.gallery-item').filter (
          buttonIsPrev == 'prev' ? ':last' : ':first'
        );

    next.fadeIn(300, function() {
      currentItem.hide().removeClass('active');
      $(this).addClass('active')
    });

    return false;
  });


  // zoom button
  $('.gallery-zoom').click(function () {

    var gallery = $(this).closest('.gallery'),
        galleryItem = gallery.find('.gallery-item')

    gallery.toggleClass('gallery-zoomed');

    if (gallery.hasClass('gallery-zoomed')) {
      gallery.add(galleryItem).height('100%');
    } else {
      gallery.add(galleryItem).height('auto');
      galleryHeight();
    }

    return false;
  });


  function galleryHeight(){
    $('.gallery, .gallery-item').each(function(){
      var parentHeight = $(this).parents('.hero').height();
      $(this).height(parentHeight);
    });
  }
});

---

有人知道为什么幻灯片过渡开始变得有点慢吗？非常感谢您的帮助。

您遇到的延迟是为next.fadeIn指定的300毫秒持续时间。单击几次后才注意到的原因是，所有div.gallery-item元素最初都是非隐藏的，即缺少显示：在其样式中没有显示，因此.fadeIn的回调执行时没有300毫秒的延迟。只有当元素需要淡入时，回调才会延迟，如果它已经不隐藏，它就不会。但是，一旦您导航出其中一个div.gallery-items，它就会隐藏currentItem.hide，这意味着下次导航回.fadeIn回调时会延迟

减少或消除next.fadeIn中的持续时间以加快此工作