I have created a demo of my code in this JSFiddle and also included it below. The issue I am facing occurs in Google Chrome, so I would recommend using that browser to replicate and fix the bug. Please note that the code is a snippet from a larger project and may not be perfectly simplified.
My web app uses JQuery and GreenSock's TweenLite for animations. The app consists of menus that can be transitioned using the bodyChange() function. This function takes two parameters:
- nextOrPrev: Determines whether to run the next or previous animation based on the value provided ("next" or "prev"). Currently, only the "next" animation is functional.
- bodyFunction: Specifies the function that fills the body with menu elements and wraps them in #bodyWrap.
In the demo, there are two menus: mainMenu with a #playButton. Clicking the button triggers the bodyChange() function with the parameters ("next", playSettingsBody), which switches to the playSettings menu.
The issue arises when clicking the playButton. Instead of staying in place and executing the animation, the button jumps up on the screen. I am unsure of the reason behind this behavior and would appreciate any assistance in identifying the mistake.
Thank you for your help.
mainMenuBody();
function mainMenuBody() {
$("body").append(
"<div id='playButton' class='mainButton'><div class='buttonText mainButtonText text'>PLAY</div></div>"
);
$("body").wrapInner("<div id='bodyWrap'></div>");
$("#playButton").bind("click", function() {
bodyChange("next", playSettingsBody);
});
}
function bodyChange(nextOrPrev, bodyFunction) {
switch (nextOrPrev) {
case "next":
TweenLite.to($("#bodyWrap"), .4, {
ease: Power2.easeIn,
transform: "rotateY(90deg)",
onComplete: function(){
$("body").empty();
bodyFunction();
TweenLite.from($("#bodyWrap"), .4, {
ease: Power2.easeOut,
transform: "rotateY(90deg)"
});
}
});
break;
case "prev":
alert("prev");
}
}
function playSettingsBody() {
$("body").append(
"<p class='text' id='CYTText'>This is the second menu!</p>"
);
}