javascript - 关于用jquery事件触发元素动画

Question

<p class="a">
    <p class="b">
</p>

a相对定位，b绝对定位。b的height大于a,当鼠标移入a的时候b向上滚动，移出的时候停止滚动，再移入的时候继续滚动，当b的bottom = 0的时候停止滚动。

var timer = null
var $b = $('.b');
var aHeight = parseInt($('.a').height());
var bHeight = parseInt($b.height());
var dValue = bHeight - aHeight;

function move() {
    var top = parseInt($('.b').css('top'));
    if (top < -dValue) {
        $('.b').stop(true);
        clearInterval(timer);
        return;
    }
     $('.b').animate({
        'top': '-=20'
    }, 40, 'linear');
}
$('.a').hover(function () {
    timer = setInterval(move, 40);
}, function () {
    $('.b').stop(true);
    clearInterval(timer);
});

以上是我的思路，总感觉略麻烦，不知道大家是这样做的吗

Answer 1

感觉纯 CSS 可以解决…

.b {
    -webkit-animation:scroll .5s;
            animation:scroll .5s;
    -webkit-animation-fill-mode:forwards;
            animation-fill-mode:forwards;
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}
.a:hover .b {
    -webkit-animation-play-state: running;
            animation-play-state: running;
}
@-webkit-keyframes scroll {
    from { bottom: -1200px; }
    to { bottom: 0; }

}
@keyframes scroll {
    from { bottom: -1200px; }
    to { bottom: 0; }
}