在if语句中执行动画功能

问题描述 投票:1回答:2

我有一个圆环图表,可以在页面加载时加载动画。当用户滚动到div时,我正试图让动画运行。我在我的javascript文件的开头有这个代码块

$(window).scroll(function() {

    var hT = $('#token-stats').offset().top,
        hH = $('#token-stats').outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
    console.log((hT - wH), wS);
    if (wS > (hT + hH - wH)) {
        alert('pie!');
        drawDoughnutChart();
        $(window).off('scroll')
    }
});

我在if语句中调用了函数,但它似乎不起作用。这里是我使用https://jsfiddle.net/cmLkbq6e/的确切代码的小提琴

警报工作正常,我做错了什么?

javascript jquery
2个回答
0
投票

你似乎有一个范围问题。

将圆环图绘制在jQuery ready函数之外的自己的函数drawDoughnotChart()中包装,并简单地从jQuery ready函数中调用它。这样drawDoughnutChart()就在你的$(window).scroll事件处理程序的范围内。另外,为了确保只显示一个图表,请在图表初始化程序之前加上$("#doughnutChart").empty()

function drawDoughnutChart() {

    $("#doughnutChart").empty();

    $("#doughnutChart").drawDoughnutChart([
    { title: "test",         value : 43,  color: "#e65c53" },
    { title: "test", value:  29,   color: "#26a3b1" },
    { title: "test",      value:  21,   color: "#19818d" },
    { title: "test",        value : 3.5,   color: "#396b7e" },
    { title: "test",        value : 3.5,   color: "#a5a5a5" }
  ]);
}

1
投票

首先,您需要存储相对于页面顶部的doughnutChart距离(因此您知道何时显示图表)

然后创建一个事件监听器,它将在用户滚动时运行。

最后,创建一个if语句,检查当前窗口距离是否大于或等于doughnutChart距离,然后运行动画!

const doughnutChart = document.querySelector('.chart').offsetTop;

function checkScroll () {
    if (window.scrollY >= doughnutChart) {
      $("#doughnutChart").drawDoughnutChart([
        { title: "test",         value : 43,  color: "#e65c53" },
        { title: "test", value:  29,   color: "#26a3b1" },
        { title: "test",      value:  21,   color: "#19818d" },
        { title: "test",        value : 3.5,   color: "#396b7e" },
        { title: "test",        value : 3.5,   color: "#a5a5a5" }
      ]);

      // remove listener so scroll doesn't create many charts
      removeEventListener('scroll', checkScroll);
    }
}

window.addEventListener('scroll', checkScroll);
© www.soinside.com 2019 - 2024. All rights reserved.