I'm currently building a quick website for my class' anthology book, but I'm having trouble getting the animations to work. I'm using Greensock TweenMax and TimelineMax to move the div's on click, a method that I've used before exactly and not had a problem. Now I have an issue where the click events don't fire and I don't understand what I'm doing wrong. I've read through jquery .click documentation and I think I'm initializing everything properly, I even enclosed it all in a document ready to ensure it's not initializing before the div. The functions initialized by the .click events I've copied from another site I was making where they worked perfectly. If anybody could help or point me in the right direction it would be much appreciated, thanks. I've put all of my code on JSFiddle
https://jsfiddle.net/tro2q2ye/5/
And here's the script:
`$(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);
};
});
Your click events aren't firing because click takes a callback function but you are immediately invoking the callback function and passing the result as the callback which won't work of course.
Change:
$("#t11").click(slide1(11));
to:
$("#t11").click(event => slide1(11));