Question

我对jquery来说相当新鲜

守则

HTML

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script>
    <script src="Jq/jquery.Lines.js"></script>
    </head>
    <body>
    <p>Pageworth of content</p>
           <div class="aLine"></div>
    </body>

CSS

.aLine{
    height: 40%;
    width: 20px;
    float:left;
    position:absolute;
    bottom: 0;
    left: 0;
    background-color:#00FFE5;



}
.aLine.active{
    height:100%;
    background-color:#00FFE5;
    transition: height 1s ease-out;
    -webkit-animation: aLine 1s ease-out forwards;
       -moz-animation: aLine 1s ease-out forwards;
        -ms-animation: aLine 1s ease-out forwards;
         -o-animation: aLine 1s ease-out forwards;
            animation: aLine 1s ease-out forwards;

}

Jquery的

// Returns true if the specified element has been scrolled into the viewport.
function isElementInViewport(elem) {
    var $elem = $(elem);

    // Get the scroll position of the page.
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Get the position of the element on the page.
    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}
// Check if it's time to start the animation.
function checkAnimation() {
    var $elem = $('.aLine');

    // If the animation has already been started


    if (isElementInViewport($elem)) {
        // Start the animation

        $elem.addClass('active');


    }

   else{
        $elem.removeClass('active');


    }
}

// Capture scroll events
$(window).scroll(function(){
    checkAnimation();
});

现在，如果我将它包含在html中，那么脚本会起作用，但最终会变得非常笨重。由于某种原因，作为一个外部文件，它只是没有做任何事情。我觉得我没有联系到某些东西，但我并不完全确定。

我已尝试添加

<script type="text/javascript"> 
  $(function() {
    checkAnimation();
    isElementInViewport(elem);
  });
    </script>

和

<script>
$(document).ready(function() {
            $('.aLine')checkAnimation();

        });
    </script>

对于标题和关闭正文标记之前，但两者都没有效果。我对jquery很新，所以任何帮助都会非常感激！

内联Jquery Works但外部文件无法正常工作

0 个答案: