为什么我的 div .click() 事件没有触发？使用 Greensock

Question

我目前正在为我的 class' 选集建立一个快速网站，但我无法让动画正常工作。我正在使用 Greensock TweenMax 和 TimelineMax 在点击时移动 div，这是我以前使用过的一种方法，没有出现问题。现在我有一个问题，点击事件没有触发，我不明白我做错了什么。我通读了 jquery.click 文档，我认为我正在正确初始化所有内容，我什至将其全部包含在准备好的文档中以确保它不会在 div 之前初始化。由我从另一个站点复制的 .click 事件初始化的函数在它们完美工作的地方。如果有人可以帮助或指出正确的方向，将不胜感激，谢谢。我把我所有的代码都放在 JSFiddle
https://jsfiddle.net/tro2q2ye/5/
下面是脚本：

    `$(document).ready(function () {
    var width = $(window).width();
    var divvd = new TimelineMax();
    divvd.pause();
    $("#t11").click(slide1(11));
    $("#t21").click(slide1(21));
    $("#t31").click(slide1(31));
    $("#t41").click(slide1(41));
    $("#t51").click(slide1(51));
    $("#t61").click(slide1(61));
    $("#t71").click(slide1(71));
    $("#t81").click(slide1(81));
    $("#t91").click(slide1(91));
    $("#t101").click(slide1(101));
    $("#t111").click(slide1(111));
    $("#t121").click(slide1(121));
    $("#t131").click(slide1(131));
    $("#t141").click(slide1(141));
    $("#t151").click(slide1(151));
    $(".a11").click(restart1(11));
    $(".a21").click(slide2(21, 22));
    $(".a22").click(slide2(22, 23));
    $(".a23").click(restart3(21, 22, 23));
    $(".a31").click(restart1(31));
    $(".a41").click(slide2(41, 42));
    $(".a42").click(restart2(41, 42));
    $(".a51").click(slide2(51, 52));
    $(".a52").click(slide2(52, 53));
    $(".a53").click(restart3(51, 52, 53));
    $(".a61").click(restart1(61));
    $(".a71").click(restart1(71));
    $(".a81").click(slide2(81, 82));
    $(".a82").click(slide2(82, 83));
    $(".a83").click(restart3(81, 82, 83));
    $(".a91").click(restart1(91));
    $(".a101").click(slide2(101, 102));
    $(".a102").click(restart2(101, 102));
    $(".a111").click(slide2(111, 112));
    $(".a112").click(restart2(111, 112));
    $(".a121").click(restart1(121));
    $(".a131").click(restart1(131));
    $(".a141").click(slide2(141, 142));
    $(".a142").click(slide2(142, 143));
    $(".a143").click(slide2(143, 144));
    $(".a144").click(restart4(141, 142, 143, 144));
    $(".a151").click(slide2(151, 152));
    $(".a152").click(restart2(151, 152));`

    var a, b, c, d;

    function slide1(a) {
        var d = "#s";
        var aa = a.toString();
        var d1 = d.concat(aa);
        divvd.clear();
        divvd.to("#tableofcontents", 1, {
            x: -width,
            ease: Power3.easeInOut
        }, 0.01);
        divvd.to(d1, 1, {
            x: -width,
            ease: Power3.easeInOut
        }, 0);
    };

    function slide2(a, b) {
        var d = "#s";
        var aa = a.toString();
        var bb = b.toString();
        var d1 = d.concat(aa);
        var d2 = d.concat(bb);
        divvd.clear();
        divvd.to(d1, 1, {
            x: -width,
            ease: Power3.easeInOut
        }, 0.01);
        divvd.to(d2, 1, {
            x: -width,
            ease: Power3.easeInOut
        }, 0);
    };

    function restart1(a) {
        var d = "#s"
        aa = a.toString();
        var d1 = d.concat(aa);
        divvd.clear();
        divvd.to(d1, 1, {
            x: width,
            ease: Power3.easeInOut
        }, 0.01);
        divvd.to("#tableofcontents", 1, {
            x: width,
            ease: Power3.easeInOut
        }, 0);
    };

    function restart2(a, b) {
        var d = "#s";
        aa = a.toString();
        bb = b.toString();
        var d1 = d.concat(aa);
        var d2 = d.concat(bb);
        divvd.clear();
        divvd.to(d1, 1, {
            x: width,
            ease: Power3.easeInOut
        }, 0.01);
        divvd.to(d2, 1, {
            x: width,
            ease: Power3.easeInOut
        }, 0.01);
        divvd.to("#tableofcontents", 1, {
            x: width,
            ease: Power3.easeInOut
        }, 0);
    };

    function restart3(a, b, c) {
        var d = "#s";
        aa = a.toString();
        bb = b.toString();
        cc = c.toString();
        var d1 = d.concat(aa);
        var d2 = d.concat(bb);
        var d3 = d.concat(cc);
        divvd.clear();
        divvd.to(d1, 1, {
            x: width,
            ease: Power3.easeInOut
        }, 0.01);
        divvd.to(d2, 1, {
            x: width,
            ease: Power3.easeInOut
        }, 0.01);
        divvd.to(d3, 1, {
            x: width,
            ease: Power3.easeInOut
        }, 0.01);
        divvd.to("#tableofcontents", 1, {
            x: width,
            ease: Power3.easeInOut
        }, 0);
    };

    function restart4(a, b, c, d) {
        var d = "#s";
        aa = a.toString();
        bb = b.toString();
        cc = c.toString();
        dd = d.toString();
        var d1 = d.concat(aa);
        var d2 = d.concat(bb);
        var d3 = d.concat(cc);
        var d4 = d.concat(dd);
        divvd.clear();
        divvd.to(d1, 1, {
            x: width,
            ease: Power3.easeInOut
        }, 0.01);
        divvd.to(d2, 1, {
            x: width,
            ease: Power3.easeInOut
        }, 0.01);
        divvd.to(d3, 1, {
            x: width,
            ease: Power3.easeInOut
        }, 0.01);
        divvd.to(d4, 1, {
            x: width,
            ease: Power3.easeInOut
        }, 0.01);
        divvd.to("#tableofcontents", 1, {
            x: width,
            ease: Power3.easeInOut
        }, 0);
    };
});

Answer 1

您的点击事件没有触发，因为 click 使用回调函数，但您立即调用回调函数并将结果作为回调传递，这当然不会起作用。

变化：

$("#t11").click(slide1(11));

至：

$("#t11").click(event => slide1(11));

为什么我的 div .click() 事件没有触发？使用 Greensock

Why are my div .click() events not firing? Using Greensock

html

jquery

gsap