Question

我在这里有一个jsfiddle：http://jsfiddle.net/cmscss/kdpk7yu0/

如果您单击下一个箭头几次，那么后面的箭头几次幻灯片过渡变得迟钝。

这是我建立的第一个画廊，它已经从各种答案拼凑而成，以获得以下功能：

在页面上允许多个图库
切换全屏模式
从中心裁剪/缩放图像
当画廊是.hero力量画廊高度适合

但是因为代码拼凑在一起，我想我不完全理解如何优化事物 - 我也发现三元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);
    });
  }
});

任何人都可以看到为什么幻灯片转换开始变得有点迟钝？任何帮助将不胜感激。

Answer 1

您遇到的延迟是为next.fadeIn指定的300毫秒的持续时间。你点击几次之前没有注意到它的原因是所有div.gallery-item元素最初都是非隐藏的（即它们的样式中缺少display: none），因此回调为.fadeIn在没有300毫秒延迟的情况下执行（仅当元素需要淡入时才会延迟回调，如果元素已经非隐藏则不会延迟回调）。但是，一旦您从其中一个div.gallery-item导航，它就会被隐藏（currentItem.hide()），这意味着当您下次导航回.fadeIn时，next.fadeIn回调会被延迟。

缩短或消除{{1}}中的持续时间，以加快这项工作。

经过一些上一次/下一次点击后，图库转换变得迟缓

1 个答案: