0

这都是关于这个 jQuery 插件的：

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

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

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

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

但无论如何，

这些是 CSS3-Solutions 和 image-overlay-solutions ，由于三个原因，它们都是不切实际的：

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

2.) 并非所有浏览器，当然也不是所有移动浏览器都支持 css3 转换

3.) 带有图像叠加的解决方案更多的是一种解决方法，而且不是很灵活。

所以：

滚动时不能以某种方式包含 jQuery.animate: Opacity 吗？将当前图像淡化为完全不透明并将“其他”图像淡出？

欢迎任何帮助。我用移动盒子的 JavaScript 试试运气，但它似乎比我想象的要复杂......

干杯

4

1 回答 1

0

我自己找到的。对于淡入零编辑此部分：

// 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-17T18:18:28.413 回答