Exploring the realm of jQuery animations, I am currently experimenting with animating a div to the right side of the window while changing its color using jQuery UI. This is just a fun project without any specific purpose in mind. Below is the code snippet that I have been working on:
HTML:
<div id="box1"></div>
<button type="button" id="btn"> Click Me! </button>
CSS:
#box1{
width: 200px;
height: 200px;
background-color: red;
border: 0px solid black;
border-radius: 0px;
position: relative;
}
#btn{
position: fixed;
top: 600px;
display: table-cell;
font-size: 30px;
}
JQuery:
var allow = true;
var animating = false;
$("#btn").click(function(){
if(allow == true){
if(!animating){
animating = true;
$("#btn").hide();
$("#box1").animate({backgroundColor: "yellow", borderWidth: "5px"}, 1000, "linear").animate({left: "500px"}, 1000).animate({top: "500px"}, 1000);
$("#box1").animate({left: "1000px", top: "0px"}, 1000).animate({left: "500px"}, 1000).animate({top: "500px"}, 1000, function(){
allow = false;
animating = false;
$("#btn").show().text("Click Me Aagain!");
});
}
} else {
if(!animating){
$("#btn").hide();
animating = true;
$("#box1").animate({top: 0}, 1000).animate({left: 0}, 1500).animate({backgroundColor: "red", borderRadius: 0, borderWidth: 0, width: "100px", height: "100px"}, 1000, function(){
$("#btn").show().text("Start Over!");
});
animating = false;
allow = true;
}
}
});
In this code, the first variable toggles between different animation sequences and the second one ensures that animations are not triggered multiple times accidentally. The targeted element for moving to the right is identified as #box1, and it should reach its final position at the end of the initial sequence.
Your assistance is greatly appreciated!