Question

我正在寻找一种方法来实现这一目标，以便当我从center移除p.title.class班级时，它可以顺利过渡到新位置。 JSfiddle

下面是我的HTML片段：

<body>
    <div class="wrapper-top">
        <div>
            <ul>
                <li class="left"><a href="#">Help</a></li>
                <li class="right">
                    <a href="#">Login</a> 
                    <a href="#">Register</a>
                </li>
            </ul>
        </div>
        <p class="title center">LoLNode</p>
    </div>
</body>

下面是我的CSS片段：

.wrapper-top {
    min-height:100%;
    overflow:auto;
    background: -webkit-linear-gradient(#3498db, #2980b9);
    background: -o-linear-gradient(#3498db, #2980b9);
    background: -moz-linear-gradient(#3498db, #2980b9);
    background: linear-gradient(#3498db, #2980b9);
    /*background-image:url(./assets/bg_1.jpg);
    background-position:bottom;
    background-repeat:no-repeat;
    background-size:cover;*/
}
    .wrapper-top div:first-child {
        padding:5px;
        background:url(./assets/horizontal_line.png) bottom repeat-x;
        z-index:100;
    }
        .wrapper-top div:first-child ul {
            width:50%;
            overflow:auto;
            margin:auto auto;
            list-style-type:none;
        }
            .wrapper-top div:first-child ul li {
                overflow:auto;
                display:inline-block;
                color:#FFF;
                text-shadow:0px 1px 1px #000;
            }
        .wrapper-top p.title {
            font-size:60px;
            font-family:"Alegrey Thin", Helvetica, sans-serif;
            color:#FFF;
            text-shadow:0px 2px 1px #000;
            text-align:center;

        }
        .wrapper-top p.title.center {
            width:220px;
            height:60px;
            position:absolute;
            top:0;bottom:0;
            left:0;right:0;
            margin:auto auto;   
        }

这是我的jQuery片段：

$(document).ready(function() {
    $("p.title.center").click(function() {
        $("p.title.center").removeClass("center");
    });
});

JSfiddle

Answer 1

试试这个：

   $("p.title.center").animate({
        top: -100
    },1000);

无需删除中心课程。您可以使用动画功能向上滑动。

Answer 2

demo

$("p.title.center").click(function() {
    $("p.title.center").animate({top:'-30px'});
});

您可以将动画与所需的css属性一起使用

Answer 3

如果您只需要使用CSS，请参阅this fiddle。

基本上，我将位置绝对移动到p.title规则并添加了CSS3过渡，所以它现在看起来像这样：

.wrapper-top p.title {
            font-size:60px;
            font-family:"Alegrey Thin", Helvetica, sans-serif;
            color:#FFF;
            text-shadow:0px 2px 1px #000;
            text-align:center;
            width:220px;
            height:60px;
            position:absolute;
            top:10px;
            left: 50%;
            margin-left: -110px;
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            -ms-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
        }
        .wrapper-top p.title.center {
            top: 50%;
            margin-top: -30px;
        }

绝对中心，平滑过渡

3 个答案: