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;

e.g。

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

当您将鼠标悬停在#panel（伪类：悬停）上时，可以为#panel高度和不透明度设置不同的值。
不要忘记特定于供应商的转换属性版本（例如-webkit-， - o-等）。

如何在滑动导航面板中包装文本？

1 个答案: