Question

现在，当你使用鼠标时，我已经让它画了一条线但是我想要它，这样当你鼠标移开时，这条线从左到右消失。

$( "#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。

但实际上，如果您想要做 ALL ，那么您不需要任何JavaScript，只需要一点CSS：

＆＃13;

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

＆＃13;

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

＆＃13;

同样作为fiddle。

这里的想法是你可以利用:hover伪类来修改子元素的样式（.slider类div），如果你设置它transition {{ 1}}你想要的一些价值（1秒），你得到效果＆＃34;免费＆＃34;。

Answer 2

嗨，大家尝试这个解决方案......你不会觉得你的动画有任何延迟......或者因为CSS动画而闪烁：https://jsfiddle.net/leojavier/0ou3o9rn/5/

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

JS

$("#name").mouseover(function () {
    $('.slider').toggleClass('over');
}).mouseout(function () {
    $('.slider').toggleClass('over');
});

CSS

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

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

.out{
    -moz-animation: out 0.4s;
    -o-animation: out 0.4s;
    -webkit-animation: out 0.4s;
    animation: out 0.4s;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes out {
    from { width:100%;}
    to {width:0}
}

@-moz-keyframes out {
    from { width:100%;}
    to {width:0}
}

@-webkit-keyframes out {
    from { width:100%;}
    to {width:0}
}

.over{
    -moz-animation: over 0.4s;
    -o-animation: over 0.4s;
    -webkit-animation: over 0.4s;
    animation: over 0.4s;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes over {
    from { width:0;}
    to {width:100%}
}

@-moz-keyframes over {
    from { width:0;}
    to {width:100%}
}

@-webkit-keyframes over {
    from { width:0;}
    to {width:100%}
}

在此处查看：https://jsfiddle.net/leojavier/0ou3o9rn/5/

在mouseout动画线上消失

2 个答案: