jquery - 带有 JQuery addClass 的 CSS 动画。使用 true 或 false 只运行一次

Question

我有一个 CSS 动画，当页面在浏览器中显示时我想运行它。我正在使用 true 或 false 函数来获取位置(称为“posish”)。我可以在页面进入 View 或 posish 为真 (13900) 时运行一次，但我也想在 posish 变为假时再次运行一次。

我的问题是，如果我将它设置为 true 和 false 都运行动画，则动画会在您滚动时连续运行，而我只希望它为每个实例运行一次，直到实例变为相反。另外，我有两个类运行相同的动画，所以我可以添加和删除。我希望这是有道理的!这是我的代码:

if (posish(13900)) {    
    $('.shadow').removeClass('shrink-2');   
    $('.shadow').addClass('shrink-1');
} else {
    $('.shadow').removeClass('shrink-1');
    $('.shadow').addClass('shrink-2');  
}

这是posish函数的代码

function posish(pos) {
    pos-=19;
    if (scrolled-viewport/4 < pos) {
        return false;
    } else if (scrolled > pos+viewport/2) {
        return true;
    } else {
        return (scrolled-viewport/4-pos)/(viewport/4);
    }
}

如果您需要更多信息，请告诉我。感谢您的帮助!

Answer 1

好的，这是我制作的用于演示一些代码的 Fiddle:

http://jsfiddle.net/3XbTG/

如果您运行它并查看控制台，您会发现它成功地测试了两个正值。

我认为你想要做的是查看“pos”是否大于总视口(viewport)高度的 1/4(高度 + 滚动位置 - 19)

第一个问题是您希望在每次运行函数时都获取viewport 和scrolled 的值。

第二个问题是您应该只运行一个测试，并从中返回值。您的函数返回 bool 值或数字，这令人困惑。

function posish(pos) {
    var viewport = $(window).height();
    var scrolled = $('body').scrollTop();
    var totalHeight = scrolled + viewport - 19;
    return (totalHeight / 4 < pos);
}