Question

我正在尝试为div上的底部边框设置动画，使其看起来像是从右边滑入的一条线。

我正在使用jQuery，但似乎无法解决如何实现它，有人能指出我的教程或阅读方向吗？

Answer 1

使用边框无法做到这一点。您只能为底部边框的宽度（看起来是它的高度）设置动画，而不是它的左/右位置或水平宽度。

相反，请看一下在元素中创建一个绝对定位的元素，然后设置它的宽度。

<div id="foo">
    Foo
    <div class="slider"></div>
</div>

#foo {
    font-size: 2em;
    position: relative;
    padding: 30px;
}
.slider {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: #C00;
    width: 0%;
}

$('.slider').animate({
    width: $('#foo').width()
}, 1000);

Example fiddle

Answer 2

小提琴中每个Rory的参考

HTML

<div id="example"><div id="sample"></div></div>

JS

$( '#sample' ).animate({
width: "100%",
}, 1500 )

CSS

#example{ height: 100px; width: 100px; }

#sample { border-bottom: 1px solid black; width: 0px; }

http://jsfiddle.net/p4zondkn/

Answer 3

您不需要使用javascript。使用转换，您也可以使用css3执行动画。

小提琴 http://jsfiddle.net/Drea/e7sf401q/

相关代码：

html

<div id="foo">hover me
    <div class="slider"></div>
</div>

css

.slider{
    transition: width 2s ease;
    width: 0%;
 }

对于悬停效果：

#foo:hover .slider{
    width: 100%;
}

或者添加一个带有jquery的类，用作点击事件。

.sliderAnimate {
    width: 100%;
}

动画边框从左到右

3 个答案: