使用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只運行一次

回答

相關問題