[SOLVED]animate() + detach()/appendto() issue
Hi, I'm trying to learn how galleries work. I have 4 images horizontally lined up. I'm trying to make it so they shift to the right, and the image on the far right moves to the far left hand side, so it creates a fluid transition.
http://jsfiddle.net/M4v3F/1/
http://jsfiddle.net/M4v3F/1/
- $(document).ready(function(){
$("#right").click(function(){
if($("#box1").find("#image1").length > 0)
{
$("#image1").animate({left:'202px'}, function(){
$(this).detach().appendTo("#box2")}
);
$("#image2").animate({left:'202px'}, function(){
$(this).detach().appendTo("#box3")}
);
$("#image3").animate({left:'202px'}, function(){
$(this).detach().appendTo("#box4")}
);
$("#image4").animate({left:'-606px'}, function(){
$(this).detach().appendTo("#box1")}
);
}
elseif($("#box1").find("#image4").length > 0)
{
$("#image1").animate({left:'202px'}, function(){
$(this).detach().appendTo("#box3")}
);
$("#image2").animate({left:'202px'}, function(){
$(this).detach().appendTo("#box4")}
);
$("#image3").animate({left:'-606px'}, function(){
$(this).detach().appendTo("#box1")}
);
$("#image4").animate({left:'202px'}, function(){
$(this).detach().appendTo("#box2")}
);
} });
});
There are two main problems. Firstly, the images complete the animation, but then when the detach/append kicks in they shift and disappear. In a previous test, they animated fine, but then they would jump once the appendTo kicked in. Essentially I want to animate the image, detach it from it's parent, and append it to a new parent. But when I append it's adopting the position from the new parent, and making the image jump instead of staying to the position it was initially animated to.
The second problem is with the elseif($("").find(""); The if works, but the elseif doesn't register.
I was wondering if anyone has any suggestions that I could pour into.