使用JQuery addClass的CSS动画。仅使用true或false运行一次

Question

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

我的问题是，如果我将它设置为true和false都运行动画，动画会随着您的滚动而持续运行，而我希望它只为每个实例运行一次，直到实例变为相反。另外，我有两个运行相同动画的类，所以我可以添加和删除。我希望这是有意义的！下面是我的代码：

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

以下是function函数的代码

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

好的，这是我用来演示代码的小提琴：

http://jsfiddle.net/3XbTG/

如果您运行它并查看控制台，您将看到它成功地测试了两个possh值。

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

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

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

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