Welcome to my first attempt at using jQuery! Please bear with me as I navigate through this learning process. Here's the challenge: I have a series of elements in my HTML.
<div class="garden">
<div class="point left">◄</div>
<div class="trees">
<div id="apple">Apple</div>
<div id="cherry">Cherry</div>
<div id="pear">Pear</div>
<div id="oak">Oak</div>
<div id="fir">Fir</div>
</div>
<div class="point right">►</div>
</div>
I am trying to move the elements to the left after clicking "pointLeft", and to the right after clicking "pointRight". When an item is at the leftmost position and "pointLeft" is clicked, that item should be removed, a copy created, and placed at the rightmost position. For instance, when you click on "pointLeft", "cherry" moves to the spot where "apple" was, "pear" moves to the spot where "cherry" was, and so on. Additionally, the animation feature (.animate()) needs to be incorporated. Initially, I am attempting to animate one element without using .clone().
$(document).ready(function() {
var trees = ["#apple", "#cherry", "#pear", "#oak", "#fir"];
var treePosition = [];
for (var i = 0; i < trees.length; i++) {
treePosition.push($(tree[i]).position());
}
function changePositionLeft() {
if ($("#apple").position()) {
$(trees[0]).animate(treePosition[4]);
}
else if ($("#apple").position() == treePosition[4]) {
$("#apple").animate(treePosition[3]);
}
}
$(".point.left").click(function() {
changePositionLeft();
});
});
After the first click, "apple" successfully moves to the position of "fir". However, upon the second click, "apple" does not animate to treePosition[4]. Could someone please explain why there is no animation after the second click, and suggest a solution? Thank you!