i cant get current position of element using jquery

Question

Simply i want to move one element to near another element using jquery animate.I tried element's possition() and offest() to achieve my task but no use.

Check my live demo what i tried http://jsfiddle.net/z4aLva34/23/

from the demo,i just want to move Rat near Cat(after animated place) when it matched.

How to do this?

$('.dropzone').click(function() {
    var x, y;
    var Ans = $(this).attr('id');
    $(this).animate({
        left : "100px"
    }, "slow");
    $('#textid').val(Ans);

});

var i = 1;

$('.item').click(function() {
    var Ques = $(this).attr('id');
    var lname = $(this).attr('name');
    $(this).animate({
        right : '100px'
    });
    var Ans = $('#textid').val();

    if (Ques == Ans) {
        // alert("matched");
        T = $("#" + Ans).offset().top;
        L = $("#" + Ans).offset().left;
        $(this).animate({
            bottom : T + 'px'
        });
        $(this).animate({
            right : L + 'px'
        });
        // here i want to move this elemnt to near mathced element but i cant!
        if (i == 1) {

            $("#" + Ans).css({
                'background-color' : 'red',
                'color' : 'white'
            });

            $('label[name=' + lname + ']').css({
                'background-color' : 'red',
                'color' : 'white'
            });

        }

        else if (i == 2) {

            $("#" + Ans).css({
                'background-color' : 'green',
                'color' : 'white'
            });

            $('label[name=' + lname + ']').css({
                'background-color' : 'green',
                'color' : 'white'
            });

        } else if (i == 3) {

            $("#" + Ans).css({
                'background-color' : 'yellow',
                'color' : 'black'
            });

            $('label[name=' + lname + ']').css({
                'background-color' : 'yellow',
                'color' : 'black'
            });

        }
        i++;

    } else {
        $("#" + Ans).animate({
            left : "0px"
        });
        $(this).animate({
            right : "0px"
        });
    }
});

Answer 1

Here is your ans

  oldT  = $("#"+Ans).offset().top;
  oldL = $("#"+Ans).offset().left;

  currentT  = $(this).offset().top;
  currentL = $(this).offset().left;
  T = currentT-oldT;
  L = currentL-oldL - 80;
  $(this).animate({bottom:T+'px'});
  $(this).animate({right:L+'px'});

Answer 2

I have correct it

$('.dropzone').click(function(){
    var x,y;
    var Ans = $(this).attr('id');
    $(this).animate({left:"100px"},"slow" );
    $('#textid').val(Ans);

});

var i=1;

$('.item').click(function(){
    var Ques =$(this).attr('id');
    var lname = $(this).attr('name');
    var Ans =$('#textid').val();

    if(Ques==Ans)
    {
       //alert("matched");
      T  = $("#"+Ans).offset().top;
      L = $("#"+Ans).offset().left;
      M  = $(this).offset().top;
      N = $(this).offset().left;
      M-=T;
      N-=(L+70);
      $(this).animate({bottom:M+'px'});
      $(this).animate({right:N+'px'});
        //here i want to move this elemnt to near mathced element but i cant!
         if(i==1){

            $("#"+Ans).css({'background-color':'red','color':'white'});

            $('label[name='+lname+']').css({'background-color':'red','color':'white'});

            }

            else if(i==2){

            $("#"+Ans).css({'background-color':'green','color':'white'});

            $('label[name='+lname+']').css({'background-color':'green','color':'white'});

            }
            else if(i==3){

                $("#"+Ans).css({'background-color':'yellow','color':'black'});

                $('label[name='+lname+']').css({'background-color':'yellow','color':'black'});

                }
        i++;


    }
    else
    {
        $("#" + Ans).animate({left:"0px"});
        $(this).animate({right:"0px"});
    }
});