1

新来的; 希望我做对了！

我正在使用 transit.js 在 fullpage.js 幻灯片中交换 DIV。最初，除了“介绍”文本之外的所有 DIV 都通过 .hide CSS 类隐藏。“slidetext”区域下方有三个按钮，单击时会显示与按钮相关的内容。对于每次点击，JS 都会检查该按钮的内容是否已经显示；如果是，则不会发生任何事情。如果不是，则所有其他可能的可见 div 都将在屏幕外转换并隐藏，并且请求的 DIV 会加载到屏幕右侧，滑入视图并变为可见（带有一点不透明度过渡）。

我的问题是在转换过程中 div 的显示和隐藏导致请求的 DIV 在屏幕上上下颠簸。我不能使用内联块样式来纠正这个问题，因为这会覆盖在 JS 中触发的“显示：无”以隐藏 DIV ..对吗？我猜解决方案就在我面前，但我一直在弄乱 JS 和 CSS 一段时间，无法弄清楚我需要什么。是否可以使用 jquery 更改 DIVS 的可见性状态，以便我可以内联样式并仍然根据需要使它们不可见？

Jsfiddle在这里：http: //jsfiddle.net/ottomaddox/baV5n/3/

使用 jQuery 1.9.1 和 transit.js（链接小提琴）

当前的JS：

('.circle img').on('click', function(e) {
            var $this = $(this),
                $id = $this.attr('id'),
                $class = $('.about-' + $id);

            if( $class.is(':visible'))
            {
                    return;
            }
            else 
            {
                    $('.slidetext').children().not( $class ).transition({ x: '-100%', opacity : 0 }, function () { $('.slidetext').children().not( $class ).hide()});
                    $('.about-' + $id).css({ x: '100%' });
                    $('.about-' + $id).show().transition({ x: '0%', opacity: 1.0 }); 
                    return;        
            }
        });

感谢您的任何指导！

4

1 回答 1

0

明白了（或多或少）！

必须为transit.js 序列中的所有div 提供相对于“slidetext”容器（具有相对位置）的绝对位置和固定高度。我确实失去了垂直居中，但这比故障动画更容易解决。

还调整了脚本，以便只有可见的 div 在幻灯片之间进行动画处理（不确定它有什么不同，但看起来更整洁）。

供其他人参考：

更新的 JSFiddle：http: //jsfiddle.net/ottomaddox/baV5n/3/

<script>
            $('.circle img').on('click', function(e) {
                var $this = $(this),
                    $id = $this.attr('id'),
                    $class = $('.about-' + $id);

                if( $class.is(':visible'))
                {
                        return;
                }
                else 
                {
                        $('.slidetext').children(':visible').not( $class ).transition({ x: '-100%', opacity : 0 }, function () { $('.slidetext').children(':visible').not( $class ).hide()});
                        $('.about-' + $id).css({ x: '100%', display: 'inline-block' });
                        $('.about-' + $id).show().transition({ x: '0%', opacity: 1.0 }); 
                        return;        
                }
            });
</script>

相关CSS：

.slidetext {
position:relative;
min-height:350px;
}

.intro, .about-chef, .about-cater, .about-workshop {
width:100%;
height:100%;
position:absolute;
top: 0;
left: 0;
display:inline;
}

.hide {
  display: none;
}

为了使它起作用，按钮图像应该具有对应于“about-”div 的 id，并且除了介绍性文本之外的所有 div 必须在加载时隐藏。

希望这有点道理。再次感谢 G. Mendes 为我指明了正确的方向。

于 2014-05-09T10:56:35.040 回答