Question

新来的;希望我做对了！

我使用transit.js在fullpage.js幻灯片中交换DIV。最初，所有DIV，但＆＃34;介绍＆＃34;文本通过.hide CSS类隐藏。＆＃34; slidetext＆＃34;下面有三个按钮。单击时显示与按钮相关的内容的区域。对于每次单击，JS检查是否已显示该按钮的内容;如果是的话，没有任何反应。如果不是，则所有其他可能的可见div都会在屏幕外转换并隐藏，并且请求的DIV会加载到屏幕右侧，滑入视图，并变为可见（具有少许不透明度转换）。

我的问题是在转换过程中显示和隐藏div会导致请求的DIV在屏幕上上下颠簸。我不能使用内联块样式来纠正这个问题，因为它会覆盖＆＃34; display：none＆＃34;在JS中触发隐藏DIVs .. right？我猜这个解决方案就在我面前，但我现在已经搞乱了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;        
            }
        });

感谢您的所有指导！

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>

在Transit.js转换过程中显示隐藏的DIVS内联？

1 个答案: