javascript - 如何将我的文本包装在滑动导航面板中？

Question

我有一个面板，当你点击它时它会上下滑动。当面板向下滑动时，会出现一些导航文本。当面板向上滑动时，文本应该会随之向上滑动，但事实并非如此。面板滑动，文本留在背面。它隐藏但不随面板滑动。

HTML:

<div id="panel">
    <ul class="nav">
        <a href="#sec1" id="home">home</a>
        <a href="#sec2" id="proj">proj</a>
        <a href="#sec3" id="about">about</a>
    </ul>
</div>
<div id="flip"></div>

Javascript:

$('a.panel').click(function() {
    $('a.panel').removeClass('selected');
    $(this).addClass('selected');

    current = $(this);

    $('#wrapper').scrollTo($(this).attr('href'), 800);

    return false;
});

CSS:

#flip {
    content: url("Some image to click on");
    margin: auto;
    z-index: 100;
}

#panel {
    padding: 5px;
    text-align: right;
    background-color: #fff;
    display: block;
    z-index: 100;
    opacity: 0.7;
    /* position:fixed;
    width: 100%; */
}

Answer 1

抱歉，伙计，我不懂 jQuery，但很快您就可以尝试通过 CSS 转换 实现它。

一旦你将过渡设置为

transition: property duration timing-function delay, property duration timing-function delay; 

例如

transition: height 0.5s ease-in, opacity 0.25 ease-in 0.5s; 

当您将鼠标悬停在#panel(伪类 :hover )上时，您可以为#panel 高度和不透明度设置不同的值。
不要忘记过渡属性的 vendor 特定版本(如 -webkit-、-o- 等)。