jquery动画第一次运行不滑动

Question

我有个小提琴

基本上，当你第一次悬停时，我想要。标题-2要逐渐滑行，而不是“跳起来”。第一次悬停之后，一切都很好。

知道如何做到这一点吗？

html

<div class="caption-img">
    <div class="headline">
        <h2>You should Study here</h2>
    </div>
    <div class="caption-2">
        <p>Learning at a place puts you in the driving seat as you set off on the journey
            to your dream career. Whether you want to become a chef, a mechanic, a builder,</p>
        <p>Learning at nice place puts you in the driving seat as you set off on the journey
            to your dream career. Whether you want to become a chef, a mechanic, a builder,</p>
    </div>
</div>

jquery

$(".caption-img").hover(function() {
    $(".headline").hide();
    $(".caption-2").show().stop().animate({"top" : "0px"});
}, function() {
    $( ".caption-2").stop().animate({"top" : "250px"});
    setTimeout(function() {
        $( ".caption-2").hide();
        $( ".headline").show();
    }, 300);
});

css

.headline {
    padding: 10px;
    font-size: 11px;
    color: white;
    background: rgba(0, 154, 202, 0.7);
    position: absolute;
    bottom: 0px;
    width:100%;
}
.caption-2 {
    padding: 10px;
    font-size: 11px;
    color: white;
    background: rgba(0, 154, 202, 0.7);
    position: absolute;
    bottom: 0px;
}

.caption-img {
    height: 320px;
    position: relative;
    background: #E9EAEC url(http://upload.wikimedia.org/wikipedia/commons/3/3d/Northwest-relief_HazeltonMountains.jpg);
    background-size:contain;
}

.caption-2 {display:none;}

Answer 1

.caption-2没有初始的top CSS值。jQuery .animate()需要在动画的每一端都有一个数值才能成功地动画元素。只需为top设置初始的.caption-2样式

.caption-2 {
    padding: 10px;
    font-size: 11px;
    color: white;
    background: rgba(0, 154, 202, 0.7);
    position: absolute;
    top: 250px;
    bottom: 0px;
}

另外，不要使用setTimeout()来切换标题。由于.animate()接受回调函数；动画完成时要调用的函数，您可以使用它：

$(".caption-img").hover(function() {
    $(".headline").hide();
    $(".caption-2").show().stop().animate({"top" : "0px"});
}, function() {
    $( ".caption-2").stop().animate({"top" : "250px"}, 400, function(){
        $(this).hide();
        $( ".headline").show();
    });
});

JSFiddle