Search jQuery

jQuery Forum

[SOLVED]animate() + detach()/appendto() issue

in Using jQuery • 8 years ago

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/

$(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.

Replies(5)

jakecigar

Re: animate() + detach()/appendto() issue

8 years ago

JavaScript does not have an elseif. Just else if.

http://jsfiddle.net/jakecigar/M4v3F/3/ I also removed the left from the elements so that the images appear in the boxes.

JΛ̊KE

7blake

Re: animate() + detach()/appendto() issue

8 years ago

Thanks for the reply and alteration jakecigar.

Yes, I think this is the second time I've made a folly with the else if. Silly mistake. So adjust the left property to 0 when the sequence of commands is issued? So it animates(left +202), detaches, attaches(appends) then resets left: 0px, which makes it sit inside the new container properly? How come when it appends to the new container it doesn't jump automatically to left:+202px, then jump back to left:0px after the additional CSS positioning command? (more curious on the priority of commands I guess, because it seems like it doesn't adopt all of the new containers attributes until after that entire line of commands is finalized? :P ... in anycase thanks for the solution

I have another problem though...
I've slowed it down now to show what the main problem is. Containers 1-3 animate to the right, while container 4 animates to left to container 1. The problem is Containers 1-3 disappear as soon as they animate outside of their container. It's as if they have a hidden overflow or their Z-index is dropping below for some reason.

Tbh I'm not sure, because container 4 animates across all 4 containers and is visible during the entire animation. I suppose that could be the issue, but it looks more like it's related to either the individual jQuery code or the CSS for the containers.

http://jsfiddle.net/M4v3F/5/

.containers {
    width:200px;
    height:200px;
    border:1px solid black;
    background-color:white;
    float:left;
    display:inline-block;
    white-space:nowrap;
    position:relative;
   }
$("#image1").animate({
                left: '202px'
            }, 2000, function () {
                $(this).detach().appendTo("#box2").css("left","")
            });
            $("#image4").animate({
                left: '-606px'
            }, function () {
                $(this).detach().appendTo("#box1").css("left","")
            });

jakecigar

Re: animate() + detach()/appendto() issue

8 years ago

I removed the detach calls, because they aren’t necessary. http://jsfiddle.net/jakecigar/M4v3F/6/ .

But the problem has to do with the z-indexes. They all go to the right spot, but it is not pretty.

I suggest you give up on the idea of moving them in the DOM, and just play with their CSS absolute positions instead.

JΛ̊KE

7blake

Re: animate() + detach()/appendto() issue

8 years ago

lol so simple. I just made image class z-index of 30 :P works like a charm. Always a nice feeling when you get simple things like this working :D Now I've got to learn more refined ways of doing this.

Thanks alot for your help, I really appreciate the time and knowledge you guys share here :)

http://jsfiddle.net/jakecigar/M4v3F/7/

*edit*

how come I shouldn't use the detach()? I read somewhere that appendTo creates a clone per say, and doesn't move the original? Guess it's time to look deeper into the appends and detach methods.

jakecigar