Question

我只想使用jquery animate将一个元素移动到另一个元素附近。我尝试了元素的possition（）和offest（）来实现我的任务但没有用。

检查我的实时演示我尝试了什么http://jsfiddle.net/z4aLva34/23/

从演示中，我只想在匹配时将鼠移动到Cat附近（在动画之后）。

怎么做？

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

我纠正了

$('.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"});
    }
});

Answer 2

这是你和

  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'});

我无法使用jquery获取元素的当前位置

2 个答案: