畫廊轉變成爲後几上一頁/下一頁點擊

Question

我這裏的jsfiddle低迷。

這是第一個畫廊我已經建立已經從不同的答案拼湊起來，以獲得以下功能：

• 允許頁面
• 切換全屏模式
• 作物上的多個畫廊從他們中心/等級圖像
• 當畫廊是.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 ms持續時間。直到點擊幾次才注意到的原因是所有div.gallery-item元素最初都是非隱藏的（即樣式中缺少display: none），因此.fadeIn的回調沒有300毫秒的延遲（只有當元素需要淡入時纔會延遲迴調，如果它已經不隱藏）。一旦你從div.gallery-item之一導航，它會被隱藏（currentItem.hide()），這意味着當你下一次回到它時，.fadeIn回調將被延遲。

減少或消除next.fadeIn的持續時間，以使其工作更快。