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

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

我的问题是，如果我设置为真& 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); 
    } 
}

请让我知道如果你不再需要信息的代码。谢谢你的帮助！

来源

2013-05-16 Desmond

'viewport'的值是什么？ –

'viewport = $（window）.height（）; posish函数根据您是否高于数字13900提供了一个true或false。 – Desmond

好吧，这里是我做了演示一些代码小提琴：如果你运行它，并期待在控制台

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); 
}

来源

2013-05-16 10:33:10

非常感谢Steven。我今天无法尝试，下周初尝试，并让你知道我该怎么走。再次感谢您的帮助！ – Desmond

嗨史蒂夫。我设法尝试了你的新功能，它似乎阻止了网站的其他部分的工作。它可能有太多的蠕虫可以打开，所以我现在就离开它！尽管感谢您的帮助，但一切顺利。 – Desmond

嗨史蒂文，我已经做到了。谢谢你的帮助。 – Desmond

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

回答

相关问题