javascript - Animating bottom border (left to right) - Stack Overflow

admin管理员组

文章数量:1317915

I'm trying to get the bottom border to left to right. I also can't seem to position it directly under the title and it animates from the center outwards. I'm not sure what to change.

/

.slider {
position: absolute;
display:block;
left: 50%;
top:90%;
transform: translate(-50%, 0);
position:absolute;
top:43%;
margin:0 auto;
height: 2px;
background-color: #000;
width: 0%;
}

I'm trying to get the bottom border to left to right. I also can't seem to position it directly under the title and it animates from the center outwards. I'm not sure what to change.

https://jsfiddle/81uo76hx/2/

.slider {
position: absolute;
display:block;
left: 50%;
top:90%;
transform: translate(-50%, 0);
position:absolute;
top:43%;
margin:0 auto;
height: 2px;
background-color: #000;
width: 0%;
}

• javascript
• jquery
• css

Share Improve this question Follow asked Aug 4, 2015 at 22:59 user2252219user2252219 86533 gold badges1717 silver badges4242 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

hope you will trigger that animation with javascript, you can do it in pure CSS with transition, and setting right from 100% to 0 with extra class as animation transition: right 4s;

.slider is now inside the #name div, so it will move with it and top/left will be relative to this text

https://jsfiddle/0ou3o9rn/

version with CSS animation (adding animated class in javascript, but you can bind it somehow to hover, or other event on creation) https://jsfiddle/tto1vrz5/

You could set left coordinate with jQuery. Then you need to remove transform from your css. Like this:

$('.slider').css('left', $('#name').position().left).animate({
        width: $('#name').width()
    }, 4000);

.slider {
    position: absolute;
    display:block;
    margin: 0 auto;
    top:90%;
    position:absolute;
    top:43%;
    margin:0 auto;
    height: 2px;
    background-color: #000;
    width: 0%;
}

https://jsfiddle/mbz6okmf/

Wrap the text and slider in a relative positioned element and set the slider bottom: 0. It will animate from center outwards at the bottom of text.

HTML

<div id="splash">
    <div id="name">
        <div class="container">
            random title
            <div class="slider"></div>
        </div>
    </div>
</div>

CSS

#splash {
    width:100%;
    height:100%;
    position:fixed;
}
.container {
    position: relative;
}
.slider {
    position: absolute;
    left: 50%;
    bottom: 0;
    height: 2px;
    background-color: #000;
    width: 0%;
    transform: translate(-50%, 0);
}
#name {
    color:#000;
    font-family:'Arial-BoldMT';
    font-weight:bold;
    font-size:50px;
    letter-spacing: -2px;
    left: 50%;
    transform: translate(-50%, 0);
    position:absolute;
    top:40%;
    margin:0 auto;
}

JS Fiddle Demo

Set slider left: 0 and remove translate if you need to to animate from left to right.

JS Fiddle Demo

This is how I would do it. Make an inline-block container around the children, center that, then align the slider to the left of that container.

$('.slider').animate({
    width: $('#name').width()
}, 4000);

#splash {
    text-align:center;
    width:100%;
    height:100%;
}
#splash:before {
    content: "";
    height: 100%;
}
#splash:before,
#wrp {
    display:inline-block;
    vertical-align:middle;
}
#wrp {
    text-align:left;
    display:inline-block;
}
#name {
    color:#000;
    font-family:'Arial-BoldMT';
    font-weight:bold;
    font-size:50px;
    letter-spacing: -2px;
    display:block;
}
.slider {
    height: 2px;
    background-color: #000;
    width: 0;
}
html, body { margin: 0; height: 100%; }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="splash">
    <div id="wrp">
        <span id="name">random title</span>
        <div class="slider"></div>
    </div>
</div>

本文标签： javascriptAnimating bottom border (left to right)Stack Overflow