我试图在用户上下滚动时添加类以显示 2 个 css 动画。
如果我只使用向下滚动动画效果很好,但是当我同时使用向上滚动和向下滚动动画时它会不一致。
我在让动画连续多次触发时遇到问题。在-向下滚动暂停,向下滚动暂停,向上滚动暂停,向上滚动暂停。
Here's a jsFiddle to better demonstrate the problem.
和代码-
(function () {
var previousScroll = 0;
$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll) {
//down scroll code
$("#repel").removeClass("climb");
$("#repel").addClass("repel").delay(1150).queue(function (next) {
$(this).removeClass("repel");
next();
});
} else {
// upscroll code
$("#repel").removeClass("repel");
$("#repel").addClass("climb").delay(1000).queue(function (next) {
$(this).removeClass("climb");
next();
});
}
previousScroll = currentScroll;
});
}());
最佳答案
我想通了...
我只需要更改移除动画的方式。我没有使用延迟和队列,而是检测到 animation end并以这种方式将其删除。
(function () {
var previousScroll = 0;
$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll) {
//down scroll code
$("#repel").addClass("repel");
$("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function () {
$('#repel').removeClass('repel');
});
} else {
// upscroll code
$("#repel").addClass("climb");
$("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function () {
$('#repel').removeClass('climb');
});
}
previousScroll = currentScroll;
});
}());
关于jquery - 使用 jQuery 在向上滚动和向下滚动时添加不同的 CSS 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16256993/