將淡入淡出變爲JQuery中的幻燈片

Question

單擊縮略圖時，圖像之間的標準galeriffic畫廊會逐漸淡化。如何更改圖庫，以便圖像從右側滑下頁面，然後顯示下面的圖像？由於

<script> 
    jQuery(document).ready(function($) { 
     // We only want these styles applied when javascript is enabled 
     $('div.navigation').css({'width' : '300px', 'float' : 'left'}); 
     $('div.content').css('display', 'block'); 

     // Initially set opacity on thumbs and add 
     // additional styling for hover effect on thumbs 
     var onMouseOutOpacity = 1.0; 
     $('#thumbs ul.thumbs li').opacityrollover({ 
      mouseOutOpacity: onMouseOutOpacity, 
      mouseOverOpacity: 1.0, 
      fadeSpeed:   'fast', 
      exemptionSelector: '.selected' 
     }); 

     // Initialize Advanced Galleriffic Gallery 
     var gallery = $('#thumbs').galleriffic({ 
      delay:      2500, 
      numThumbs:     100, 
      preloadAhead:    100, 
      enableTopPager:   true, 
      enableBottomPager:   true, 
      maxPagesToShow:   100, 
      imageContainerSel:   '#slideshow', 
      controlsContainerSel:  '#controls', 
      captionContainerSel:  '#caption', 
      loadingContainerSel:  '#loading', 
      renderSSControls:   false, 
      renderNavControls:   false, 
      playLinkText:    '', 
      pauseLinkText:    '', 
      prevLinkText:    '', 
      nextLinkText:    '', 
      nextPageLinkText:   '', 
      prevPageLinkText:   '', 
      enableHistory:    false, 
      autoStart:     false, 
      syncTransitions:   true, 
      defaultTransitionDuration: 900, 
      onSlideChange:    function(prevIndex, nextIndex) { 
       // 'this' refers to the gallery, which is an extension of $('#thumbs') 
       this.find('ul.thumbs').children() 
        .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end() 
        .eq(nextIndex).fadeTo('fast', 1.0); 
      }, 
      onPageTransitionOut:  function(callback) { 
       this.fadeTo('fast', 0.0, callback); 
      }, 
      onPageTransitionIn:  function() { 
       this.fadeTo('fast', 1.0); 
      } 
     }); 
    }); 
</script> 

Answer 1

您可以使用jQuery的click，animate和remove功能，像這樣：

$('#thumbs ul.thumbs').click(function() { 
    var self = $(this);  
    self.animate({left: '+=500'}, 1000, 'linear', function() { 
    self.remove(); 
    }); 
}); 

這基本上意味着：

• 訂閱的所有元素相匹配的單擊事件「 #thumbs ul.thumbs'選擇器
• 單擊元素時
• 動畫將其移動500個像素的權利
• 的因素去掉，