Question

我想在浏览器中查看页面时运行CSS动画。我使用true或false函数来获取位置（称为“posish”）。当页面进入视图时，或者当posish为true时，我可以运行一次（13900），但是当posish变为false时我也想再次运行它。

我的问题是，如果我把它设置得那么真实＆amp; 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

好的，这是我演示一些代码的小提琴：

http://jsfiddle.net/3XbTG/

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

我认为你想要做的就是看看＆＃34; pos＆＃34;大于视口总高度的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);
}

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

1 个答案: