Question

这是我为朋友建立的一个小网站的链接，http://yveschaput.com/gdf2 我设法得到了我想要的动画，意思是根据菜单选择滑动div。我的问题是目标div超出画布（屏幕边界外），当你登上菜单的链接时，屏幕跳转到div之外的那些。

我不确定我是否正确解释了这一点，但如果你测试我提供的链接，你会明白我的意思。

现在，我在这些div上使用了一个“隐形”类（visibility：hidden;）。我尝试使用“display：hidden;”，这有点解决了我的屏幕外问题，但你无法为隐藏元素设置动画。

我正在使用Bootstrap 3，这可能是我的问题，因为我并没有真正使用Bootstrap的大部分功能。我只是使用他们的模板COVER作为基础，也许Bootstrap功能的一部分正在阻碍？或者我是不是基于CSS和HTML的基础知识？

无论如何，任何帮助将不胜感激。提前谢谢。

已编辑：我尝试将我的代码复制到fiddler.js，http://jsfiddle.net/34As5/ 它看起来像垃圾，但你会看到移出屏幕的效果。

以下是我的HTML设置方式：

<div class="site-wrapper">

      <div class="site-wrapper-inner">

        <div class="masthead clearfix">
            <div class="inner">
                <h3 class="masthead-brand">&nbsp;</h3>
            </div>
          </div>

        <div class="cover-container">
            <div class="menuContainer">
                <div id="menu" class="inner cover">
                    <h1 class="cover-heading title"><img src="img/TheStromWithin.png"></h1>
                    <ul class="text-left menu">
                        <li class="info">
                            <a href="#info" class="">Info
                                <p class="pull-right">.01</p>
                            </a>
                        </li>
                        <li class="preview">
                            <a href="#preview" class="">Preview
                                <p class="pull-right">.02</p>
                            </a>
                        </li>
                        <li class="buy">
                            <a href="#buy" class="">Buy
                                <p class="pull-right">.03</p>
                            </a>
                        </li>
                    </ul>
                    <div class="cover-footer text-center tradewinds">
                        <p class="">NEW ALBUM RELEASE</p>
                    </div>
                  </div> <!-- /#menu -->
            </div> <!-- /menuContainer -->

            <div class="itemContainer">
                <div id="info" class="inner cover invisible">
                    <h1 class="cover-heading"><img src="img/info.png"></h1>
                    <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo.</p>
                    <div class="cover-footer text-center tradewinds">
                        <p class="back"><a href="#menu" >BACK</a></p>
                    </div>
                </div> <!-- /#info -->

                <div id="preview" class="inner cover invisible">
                    <h1 class="cover-heading"><img src="img/preview.png"></h1>
                    <div class="lead">
                        <audio preload="auto" controls>
                            <source src="audio/Guy Duggan Fournier - GuySongs - 00 - The Voice Within_01.ogg" type="audio/ogg" />
                            <source src="audio/Guy Duggan Fournier - GuySongs - 00 - The Voice Within.mp3" type="audio/mpeg" />
                            <!-- <a href="audio/Guy Duggan Fournier - GuySongs - 00 - The Voice Within.mp3">Sample</a> -->
                        </audio>
                    </div>

                    <div class="cover-footer text-center tradewinds">
                        <p class="back"><a href="#menu" >BACK</a></p>
                    </div>
                </div> <!-- /#preview -->

                <div id="buy" class="inner cover invisible">
                    <h1 class="cover-heading"><img src="img/buy.png"></h1>
                    <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo.</p>
                    <div class="cover-footer text-center tradewinds">
                        <p class="back"><a href="#menu" >BACK</a></p>
                    </div>
                </div> <!-- /#buy -->
            </div><!-- /itemContainer -->   
            <div class="mastfoot rocksalt">
                <div class="inner">
                    <p><img class="logo" src="img/logo2.png"> &copy; 2014 <a href="http://yveschaput.com">yveschaput.com</a> - <a href="#">Credits</a></p>
                </div>
            </div>

        </div><!-- /cover-container -->

    </div><!-- /site-wrapper-inner -->

    </div><!-- /site-wrapper -->

无法隐藏屏幕元素

0 个答案: