首页 文章

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

提问于
浏览 次
2

我有一个CSS动画，我想在浏览器上查看页面时运行它 . 我使用true或false函数来获取位置（称为“posish”） . 当页面进入视图时，或者当posish为true时，我可以运行一次（13900），但是当posish变为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);
    }
}

如果您需要更多信息，请告诉我 . 谢谢你的帮助！

jquery css3 animation

1 回答

  • 1

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

    http://jsfiddle.net/3XbTG/

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

    我想你想要做的是看看“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);
}
    回复于

相关问题