Jquery 在Transit.js转换期间内联显示隐藏的div？

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

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

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

请点击此处：

使用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;        
            }
        });

感谢您的指导

明白了（或多或少）

必须为transit.js序列中的所有div指定相对于“slidetext”容器（具有相对位置）的绝对位置和固定高度。我确实失去了垂直居中，但这比那些浮躁的动画更容易处理

还调整了脚本，以便在幻灯片之间只为可见的div设置动画（不确定这是否有区别，但看起来更整洁）

供其他人参考：

更新的JSFIDLE:

为了让它工作，按钮图像应该有对应于'about-'div的id，并且除了介绍性文本之外的所有div都必须在加载时隐藏

---

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

是的，可以使用

$（element）.css（“display”、“block”）

或display所需的值。谢谢！我现在可以为可见元素保持内联块样式，但是.hide（）效果仍然会重新设置隐藏元素的样式以显示：无，按钮单击请求的div在滑入视图时仍然“跳跃”。是的，看起来它们是垂直堆叠的，当滑出完成时，它会弹出，就像Y轴上有一个过渡一样，您是否尝试过使用

float

水平设置div的样式？不确定这种过渡方式是否有效。另一件正在发生的事情是，幻灯片后隐藏的div实际上在过渡后被隐藏，通常在滑块中，您希望它像“视口”一样工作，您知道隐藏的div在那里，它们的大小和所有，只是在“窗口”中不可见我曾经尝试过浮动div，但这也不起作用，我认为这是因为当通过hide（）效果将display设置为“none”时，元素会从HTML中完全删除。re：关于视口的建议，我将尝试隐藏/定位div的其他方法，看看这是否解决了问题。非常感谢你的帮助！

<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>

.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;
}