2

ページがブラウザーに表示されているときに実行したい CSS アニメーションがあります。true または false 関数を使用して位置を取得しています (「posish」と呼ばれます)。ページが表示されたとき、または posish が true (13900) のときに 1 回実行できますが、posish が false になったときにもう一度実行したいと考えています。

私の問題は、 true と false の両方でアニメーションを実行するように設定した場合、スクロールするとアニメーションが継続的に実行されるのに対し、インスタンスが反対に変わるまでインスタンスごとに 1 回だけ実行することです。また、同じアニメーションを実行する 2 つのクラスがあるため、追加および削除できます。これが理にかなっていることを願っています！これが私のコードです：

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

さらに情報が必要な場合はお知らせください。助けてくれてありがとう！

4

1 に答える 1

1

わかりました、これは私がいくつかのコードをデモするために作成したフィドルです:

http://jsfiddle.net/3XbTG/

実行してコンソールを見ると、2 つの正しい値が正常にテストされていることがわかります。

あなたがやりたいことは、「位置」がビューポートの全高の 1/4 より大きいかどうかを確認することだと思います (高さ + スクロール位置 - 19)

最初の問題は、関数を実行するたびにviewportとの値を取得したいということです。scrolled

2 番目の問題は、単一のテストのみを実行し、その値を返す必要があることです。あなたの関数はブール値または数値を返していましたが、これは混乱を招きます。

function posish(pos) {
    var viewport = $(window).height();
    var scrolled = $('body').scrollTop();
    var totalHeight = scrolled + viewport - 19;
    return (totalHeight / 4 < pos);
}
于 2013-05-16T10:33:10.430 に答える