jQuery的MovingBoxes增加透明度過渡

這是所有關於這個jQuery的插件：jQuery的MovingBoxes增加透明度過渡

https://github.com/CSS-Tricks/MovingBoxes

基本上滾動內容，並且還能夠調整非活動內容。這真的很好，很靈活，我想添加功能來將非活動面板褪色到一個給定的不透明度，並將活動面板淡入到完全不透明狀態。

有一些方法，即在這裏找到：

https://github.com/CSS-Tricks/MovingBoxes/issues/69

但無論如何，

這些都是CSS3的解決方案和圖像疊加解決方案，而那些都是行不通的，因爲三個原因：

1.）CSS3只是正確動畫淡出圖像，但當前圖像不會淡入，因爲當前類是在動畫完成後應用的。

2.）不是所有的瀏覽器和當然，並不是所有的移動browsern支持CSS3過渡的

3）與圖像的覆蓋的解決方案是更一種解決方法，而不是很靈活。

所以：

是沒可能以某種方式包括jQuery.animate：不透明度滾動時？將當前圖像褪色爲完全不透明並將「其他」圖像淡出？

任何幫助，歡迎。我想我的運氣與移動箱JavaScript，但它似乎比我想象的更復雜...

乾杯

來源

2013-04-17 Nico varium

由我自己發現了它。對於衰減到零編輯這一部分：

// Resize panels to normal 
    base.returnToNormal = function(num, time){ 
     var panels = base.$panels.not(':eq(' + (num - base.adj) + ')').removeClass(o.currentPanel); 
     if (o.reducedSize === 1) { 
      panels.css({ width: base.regWidth }); // excluding fontsize change to prevent video flicker 
     } else { 
      panels.stop(true,false).animate({ width: base.regWidth, fontSize: o.reducedSize + 'em' , opacity: 0 }, (time === 0) ? 0 : o.speed); 
     } 
    };

和褪色完全不透明重新編輯此部分：「動畫」的部分有中

// Zoom in on selected panel 
     base.growBigger = function(num, time, flag){ 
      var panels = base.$panels.eq(num - base.adj); 
      if (o.reducedSize === 1) { 
       panels.css({ width: base.curWidth }); // excluding fontsize change to prevent video flicker 
       // time delay prevents click outer panel from following links - fixes issue #67 
       setTimeout(function(){ 
        base.completed(num, flag); 
       }, (time === 0) ? 0 : o.speed); 
      } else { 
       panels.stop(true,false).animate({ width: base.curWidth, fontSize: '1em', opacity: 1 }, (time === 0) ? 0 : o.speed, function(){ 
        // completed event trigger 
        // even though animation is not queued, trigger is here because it is the last animation to complete 
        base.completed(num, flag); 
       }); 
      } 
     };

照顧：這是關鍵。

來源

2013-04-17 18:18:28

jQuery的MovingBoxes增加透明度過渡

回答

相關問題