2

我在页面上有内容，中途我有使用 CSS 动画的技能栏。我只想在技能条可见时播放动画。

我尝试使用 js，当我使用一个技能栏时它起作用了。此处显示：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 bar 版本中，您已经直接添加了 css 类，而不是通过 javascript 以编程方式添加。这意味着动画会立即发生。

<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>

在每一行展开后删除类，并将它们添加到您的 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/

重要提示：理想情况下，您希望使您的代码可重用和可扩展。我的“修复”是一种非常骇人听闻的方式，并且没有采用最佳实践。如果您再也不会使用它并且只需要尽快完成它，这没关系，但我建议您考虑以更干燥的方式重建它。

于 2013-08-27T10:04:42.707 回答