Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    48
    Thanks
    18
    Thanked 0 Times in 0 Posts

    How to animate an appended child?

    I've been trying to make it so this div moves ontop of where it would normally be placed when it's appened. But instead it relocates it + the animation distance, which is defeating the purpose. I was wondering why it's doing this. Even if I create a completely seperate set of code for the animation aswell as the append, it still adds the animation change to the final placement from the AppendTo. Is there a way around this? Or atleast can someone help me understand what's actually happening?

    Code:
    $(document).ready(function(){
    
    
    $("#click").click(function(){
    $("#first").children(':first-child').animate({left: "+=50px"}, function() { 
            $(this).appendTo('#second');
        })
    });
    
     });
    
    
    
    <div id="firsty>
    <div id="child1"></div>
    </div>
    <div id="second">
    
    </div>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    After the animation the div with id="child1" will have a CSS "left" property of -50px. It just won't loose that property when appending it to #second ...

    If you want to get rid of it, you will have to set the "left" style to 0 again
    Code:
    $(document).ready(function(){
    
    
    $("#click").click(function(){
    $("#first").children(':first-child').animate({left: "+=50px"}, function() { 
            $(this).appendTo('#second');
            $(this).css({"left": "0"});
        })
    });
    
     });

  • Users who have thanked devnull69 for this post:

    7Blake (12-11-2013)

  • #3
    New Coder
    Join Date
    Aug 2012
    Posts
    48
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Ah that's great thankyou for the information on what's happening and how to adjust it. I poorly never associated jQ animation to the position in CSS. Thanks again.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •