2014-11-07 2 views
1

jquery animate를 사용하여 한 요소를 다른 요소 가까이로 이동하고 싶습니다. 요소의 possition() 및 offest()를 사용하여 내 작업을 수행했지만 사용하지 않았습니다. 이 일치 할 때jquery를 사용하여 요소의 현재 위치를 얻지 못했습니다.

난 그냥 (애니메이션 놓은 후) 고양이 근처에 쥐를 이동할, 내가 데모에서 http://jsfiddle.net/z4aLva34/23/

을 시도 무엇을 내 라이브 데모를 확인하십시오.

어떻게 하시겠습니까?

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

답변

3

나는이 올바른가

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

최고! 매우 내 없단이 감동 그래서 much.You 저장 당신에게 알았어요 괜찮 작업! – MMMMS

+0

안녕하세요 그것은 좋은 해결책입니다 – KVK

+0

좋은 직장 계속 –

2

여기 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'}); 
관련 문제