Question

我只使用CSS创建了一个条形图，从低到高的动画效果很好，但我想只在滚动触发时运行。以某种方式，滚动触发后的动画不会停止，它会一直运行。在inspect元件中查看最新的条形图。

jquery的

apply plugin: 'java'
apply plugin: 'war'
apply plugin: 'eclipse-wtp'
apply plugin: 'jetty'

// JDK 7
sourceCompatibility = 1.8
targetCompatibility = 1.8

repositories {
    mavenLocal()
    mavenCentral()
}


dependencies {

     compile 'ch.qos.logback:logback-classic:1.1.3'
     compile 'org.springframework:spring-webmvc:4.1.6.RELEASE'
     compile 'javax.servlet:jstl:1.2'
     compile 'org.springframework:spring-orm:4.1.6.RELEASE'
     compile 'org.springframework:spring-tx:4.1.6.RELEASE'
     compile 'org.springframework:spring-jdbc:4.1.6.RELEASE'
     compile 'mysql:mysql-connector-java:5.1.31'
     compile 'org.hibernate:hibernate-core:4.3.10.Final'
     compile 'org.hibernate:hibernate-entitymanager:4.3.10.Final'   
}

// Embeded Jetty for testing
jettyRun{
    contextPath = "etnshop"
    httpPort = 8080
}

jettyRunWar{
    contextPath = "etnshop"
    httpPort = 8080
}

//For Eclipse IDE only
eclipse {

  wtp {
    component {

      //define context path, default to project folder name
      contextPath = 'etnshop'

    }

  }
}

jsfiddle

Answer 1

这是因为你要求它。

http://jsfiddle.net/g6r1vngh/1/

告诉JS它还没有被绘制

// Bar Chart Animation
var barChartDrawn = false;

运行时将其设置为true

function barChart(){
    barChartDrawn = true;

不执行任何计算，或运行该功能，如果它是真的

$(window).scroll(function () {
    if (barChartDrawn) return;

一旦被滚动触发，动画就会继续

1 个答案: