关于用jquery事件触发元素动画
`
<div class="b">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);
});以上是我的思路，总感觉略麻烦，不知道大家是这样做的吗
展开
收起
1
条回答
写回答
写回答
-
.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; } }2019-07-17 19:15:13赞同 展开评论 打赏
问答分类：
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
