JQuery MovingBoxes добавить переход Непрозрачность

Question

Это все об этом JQuery-плагин:

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

, которые в основном прокручивает содержание, а также способен изменять размер без активного содержимого. В конце концов, это действительно приятно и гибко, я хочу добавить функциональность, чтобы угасать неактивные панели с заданной непрозрачностью и вывести активную панель на полную непрозрачность.

Есть несколько подходов, а именно найти здесь:

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

, но так или иначе,

этих CSS3-Solutions и изображение-оверлей-решение, и те и невыполнимы из-за трех причин :

1.) CSS3 просто анимирует искажение изображений правильно, но текущее изображение не исчезает, потому что текущий класс применяется после завершения анимации.

2.) Не все браузеры и, конечно, не все мобильные browsern поддержка CSS3 перехода

3.) Раствор с изображения-наложения более обходной путь и не очень гибким.

Итак:

Разве это не возможно каким-то образом включить jQuery.animate: Непрозрачность при прокрутке? Затухание текущего изображения до полной непрозрачности и исчезновение «других» изображений?

Любая помощь приветствуется. Я попробовал счастья с JavaScript движущихся коробки, но это кажется более сложным, чем я думал ...

Приветствия

Answer 1

нашел его сам. Для выцветания к нулю редактирования этой части:

// 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); 
       }); 
      } 
     }; 

уход возьмет «живой» части там: Это ключ.