jquery - 在 Transit.js 转换期间内联显示隐藏的 DIVS？

Question

这里是新的；希望我做对了!

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

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

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

使用 jQuery 1.9.1 和 transit.js(链接 fiddle )

当前的 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;        
            }
        });

感谢所有指导!

Answer 1

明白了(或多或少)!

必须为 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 为我指明了正确的方向。