2

ページにコンテンツがあり、途中で CSS でアニメーション化されたスキル バーがあります。スキルバーが表示されているときだけアニメーションを再生したいと思います。

jsを使ってみたところ、スキルバーを1つ使ったところうまくいきました。ここに示されています：jsfiddle.net/pCgYe/6/

しかし、さらにバーを追加すると、完全に機能しなくなりました。ここのように: jsfiddle.net/pCgYe/7/

js コードに何かを追加する必要があることはわかっていますが、何を追加すればよいか正確にはわかりません。

function isElementInViewport(){
            var scrollTop = $(window).scrollTop();
            var viewportHeight = $(window).height();
            $('.skiller #skill:not(.html5)').each(function(){
                var top = $(this).offset().top;
                console.log(top);
                console.log(scrollTop + viewportHeight);
                if(scrollTop + viewportHeight >= top ){
                    $(this).find('.expand').addClass('html5');
                    console.log(true);
                }else{
                    console.log(false);
                }
            });
        }

$(window).scroll(isElementInViewport);

誰かが私を正しい方向に導いてください。

よろしくお願いします！

4

2 に答える 2

0

コードの問題は HTML にあります。すべてのスキルには既にアニメーションがあるため、新しいアニメーションは実行されません。私は削除してこれを試しました

-moz-animation: css3 2s ease-out;   -webkit-animation: css3 2s ease-out;

css3 クラスから、css3 スキルにアニメーションがありました。したがって、animate という名前のクラスを要素に追加し、css でスキル クラスからアニメーションを削除し、スキル クラスごとに次のコードを追加することができます。

.jquery.animate      {-moz-animation: jquery 2s ease-out;   -webkit-animation: jquery 2s ease-out;      }

それはうまくいくはずです

于 2013-08-27T10:04:35.017 に答える
0

これは、5 バー バージョンでは、javascript を使用してプログラムではなく、CSS クラスをすぐに追加したためです。つまり、アニメーションは即座に発生します。

<div class="skiller col">
    <ul id="skill">
        <li><span class="expand html5"><small>%70</small></span><em>HTML
        5</em></li>

        <li><span class="expand css3"><small>%90</small></span><em>CSS
        3</em></li>

        <li><span class=
        "expand jquery"><small>%50</small></span><em>jQuery</em></li>

        <li><span class=
        "expand photoshop"><small>%10</small></span><em>Photoshop</em></li>

        <li><span class=
        "expand dreamweaver"><small>%100</small></span><em>Dreamweaver</em></li>
    </ul>
</div>

各行を展開した後にクラスを削除し、1 バー バージョンの場合と同様に JavaScript に追加します。私は仕事中なので、これの適切なバージョンを実行できませんが、次の JavaScript を試してください。

function isElementInViewport(){
        var scrollTop = $(window).scrollTop();
        var viewportHeight = $(window).height();
        $('.skiller #skill:not(.html5)').each(function(){
            var top = $(this).offset().top;
            console.log(top);
            console.log(scrollTop + viewportHeight);
            if(scrollTop + viewportHeight >= top ){
                $(this).find('.expand').addClass('html5');
                $(this).find('.expand1').addClass('css3');
                $(this).find('.expand2').addClass('jquery');
                $(this).find('.expand3').addClass('photoshop');
                $(this).find('.expand4').addClass('dreamweaver');
                console.log(true);
            }else{
                console.log(false);
            }
        });
    }

$(window).scroll(isElementInViewport);

HTML に追加したクラスを削除した後、HTML 展開クラスも変更する必要があります (注: これは不適切な実装ですが、大幅に改善するための基礎として使用してください)。

<div class="skiller col">
    <ul id="skill">
        <li><span class="expand"><small>%70</small></span><em>HTML
        5</em></li>

        <li><span class="expand expand1"><small>%90</small></span><em>CSS
        3</em></li>

        <li><span class=
        "expand expand2"><small>%50</small></span><em>jQuery</em></li>

        <li><span class=
        "expand expand3"><small>%10</small></span><em>Photoshop</em></li>

        <li><span class=
        "expand expand4"><small>%100</small></span><em>Dreamweaver</em></li>
    </ul>
</div>

このフィドルが実際に動作していることを確認してください: http://jsfiddle.net/pCgYe/9/

重要: 理想的には、コードを再利用可能で拡張可能にする必要があります。私の「修正」は非常にハックな方法であり、ベストプラクティスを採用していません。これを二度と使用せず、できるだけ早く完了する必要がある場合は問題ありませんが、これをはるかに DRY な方法で再構築することを検討することをお勧めします.

于 2013-08-27T10:04:42.707 に答える