Absolute center with smooth position transitions

Question

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

Heres a snippet of my 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:

.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:

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

JSfiddle

You should have a look at JQuery UI with switch class, look here http://stackoverflow.com/questions/1248542/jquery-animate-with-css-class-only-without-explicit-styles and here http://jqueryui.com/switchClass/ — singe3, Jul 31 '14 at 12:55

score 0 · Answer 1 · edited Jul 31 '14 at 13:14

0

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.

edited Jul 31 '14 at 13:14

Marcin Nabiałek

109,655
42
258
291

answered Jul 31 '14 at 12:46

Sandeep Pal

2,067
1
16
14

But then when someone resizes the browser the `p` wouldn't be in the center of the screen/repositioned to where it should be? – SaiyanToaster Jul 31 '14 at 14:25

score 0 · Answer 2 · answered Jul 31 '14 at 12:47

0

demo

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

You can use animate with required css properties

answered Jul 31 '14 at 12:47

Gibbs

21,904
13
74
138

score 0 · Accepted Answer · answered Jul 31 '14 at 12:50

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

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

.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;
        }

Thanks! This is pretty good! I'd like it if you would add comments to explain what is going on, so I can recreate this in other situations — SaiyanToaster, Jul 31 '14 at 15:52
You're welcome. So, it was necessary for p.title to be absolute in the main CSS declaration so that by removing the .center class it just changes it's position in the page. This makes applying CSS transitions possible, since you can't animate the "position" property. As you can see, p.title.center only has "top" and "margin-top" applied to it, which both work with transitions. Hope this helps, let me know if you have specific questions. — Vlad Cazacu, Jul 31 '14 at 16:08

Absolute center with smooth position transitions

3 Answers3