Question

So here is the deal. I am trying to build interactive list (just like ToDo list). My task is that on click ‘div.item’should disappear (fadeOut) from “container” and then fadeIn in “trash can”.
Here is the code, but when I run it, all animation happens in “trash can”. I tried to set a variable equals to my “.item” and make manipulations with it, still no result.

<script type="text/javascript" src="createList.js">

  $(document).on('click', '.item', function (){
        $(this).fadeOut('slow');
        $(this).appendTo('#shoppingChart').fadeIn('slow');
    });
</script>

Answer 1

You need to animate, then run the function to append –

$(document).on('click', '.item', function (){
    $(this).fadeOut('slow',function () {
         $(this).appendTo('#shoppingChart').fadeIn('slow');
    });
});​

Edit — working example – http://jsfiddle.net/jmsessink/NHtv4/