Question

关于这个jQuery-Plugin：

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

基本上滚动内容并且还能够调整非活动内容的大小。毕竟，它非常好用和灵活，我想添加功能，将非活动面板淡化为给定的不透明度，并将活动面板淡化为完全不透明度。

有一些方法，即在这里找到：

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

但无论如何，

这些是CSS3-Solutions和图像叠加解决方案，由于三个原因，这些都是不切实际的：

1。）CSS3只是正确地动画淡出图像，但当前图像没有淡入，因为在动画完成后应用了当前类。

2。）并非所有浏览器，当然并非所有移动浏览器都支持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);
                });
            }
        };

在那里照顾“动画”部分：这是关键。

jQuery MovingBoxes添加了Opacity转换

1 个答案: