javascript - 在 mouseout 动画线消失

Question

现在，我可以在鼠标悬停时画一条线，但我希望它在鼠标移开时从左到右消失。

https://jsfiddle.net/0ou3o9rn/1/

$( "#name" ).mouseover(function() { 

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

});

Answer 1

设置一个 mouseout 处理程序，将宽度设置为 0:

$("#name").mouseover(function () {
    $('.slider').animate({
        width: $('#name').width()
    }, 1000);
}).mouseout(function () {
    $('.slider').animate({
        width: 0
    }, 1000);
});

工作 fiddle .

但实际上，如果这就是所有您想要做的，您不需要任何 JavaScript，只需要一点 CSS:

.slider {
    position: absolute;
    display:block;
    left: 0;
    top:90%;
    margin:0 auto;
    height: 2px;
    background-color: #000;
    width: 0%;
    transition: width 1s;
}
#splash {
    width:100%;
    height:100%;
    background-color:#fff;
    z-index:999999;
    position:fixed;
}
#name {
    color:#000;
    font-family:'Arial-BoldMT';
    font-weight:bold;
    font-size:50px;
    letter-spacing: -2px;
    display:block;
    left: 50%;
    transform: translate(-50%, 0);
    position:absolute;
    top:40%;
    margin:0 auto;
}
#name:hover > .slider {
    width: 100%;
}

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

也作为 fiddle .

这里的想法是，您可以利用 :hover 伪类来修改子元素的样式(.slider 类 div)，如果您将它的 transition 设置为您喜欢的某个值(1 秒)，您将“免费”获得效果。