具有平滑位置过渡的绝对中心

I am looking for a way to make it so that when I remove my center class from p.title.class that it has a smooth transition to moving to the new position. JSfiddle

我正在寻找一种方法,以便当我从p.title.class中删除我的中心类时,它可以平滑过渡到移动到新位置。的jsfiddle

Heres a snippet of my HTML:

下面是我的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>

Heres a snippet of my CSS:

下面是我的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;   
        }

Heres a snippet of my jQuery:

下面是我的jQuery片段:

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

JSfiddle

3 个解决方案

#1

If you need to do this only with CSS, see this fiddle.

如果你只需要用CSS做这个,请看这个小提琴。

Basically, i moved the position absolute to the p.title rules and added CSS3 transitions, so it now looks like this:

基本上,我将位置绝对移动到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;
        }

#2

demo

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

You can use animate with required css properties

您可以使用具有所需css属性的动画

#3

Try this:

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

There is no need to remove center class. You can use animate function to slide up.

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

#1