jQuery는 폭이 다른 요소 중심에 애니메이션을 적용합니다.

Question

나는이 모든 아침을 혼란에 빠뜨 렸습니다. jQuery에 관해서는 거의 알지 못해요 ... 사과.

응답 성있는 격자에 포함될 4 개의 메뉴 항목 (이미지)이 있습니다. 클릭하면, 클릭 한 목록 항목 이미지의 가운데로 화살표 (이 예제에서는 상자)를 옮기고 싶습니다.

지금이 자바 스크립트는 오른쪽으로 만 이동합니다. 이전에 다른 버전으로 이동했기 때문에 왼쪽/오른쪽으로 이동 했으므로 원하는대로 할 수 있습니다. 또한이 경우 상자는 화면 너비에도 불구하고 클릭 한 원 중심에 항상 정렬되어야합니다. 그것은 큰 문제였습니다 ... 저는 픽셀이나 정확한 너비를 사용할 수 없습니다. 여기

보기 : http://jsfiddle.net/RevConcept/An4TF/1/

HTML :

<div id="menu-wrap"> 
    <ul> 
     <li> 
      <img id="discover" src="http://nillabean.com/images/circle-225.png" /> 
     </li> 
     <li> 
      <img id="design" src="http://nillabean.com/images/circle-225.png" /> 
     </li> 
     <li> 
      <img id="develop" src="http://nillabean.com/images/circle-225.png" /> 
     </li> 
     <li> 
      <img id="deploy" src="http://nillabean.com/images/circle-225.png" /> 
     </li> 
    </ul> 
</div> 
    <div id="wrap"> 
    <div class="block"></div> 
</div> 

CSS :

div.block { 
    position:absolute; 
    background-color:#abc; 
    width:90px; 
    height:90px; 
    margin:5px; 
} 

#wrap, #menu-wrap { 
    width:100%; 
    height:100px; 
    position:relative; 
    border:1px #000 solid; 
} 

#menu-wrap { 
    text-align:center; 
    height:235px; 
} 

ul { 
    margin:0px; 
    padding:0px; 
} 

li { 
    list-style:none; 
    float:left; 
    width:25%; 
}​ 

JQUERY :

$("#discover").click(function() { 
    $(".block").animate({ 
     "left": "+=0%" 
    }, "slow"); 
}); 

$("#design").click(function() { 
    $(".block").animate({ 
     "left": "+=50%" 
    }, "slow"); 
}); 

$("#develop").click(function() { 
    $(".block").animate({ 
     "left": "+=75%" 
    }, "slow"); 
}); 

$("#deploy").click(function() { 
    $(".block").animate({ 
     "left": "+=100%" 
    }, "slow"); 
}); 

감사합니다!

Answer 1

초기 구현에 매우 가까웠습니다. 나는 로직을 조금 단순화하여 각각의 nav 아이템에 클래스를 추가했다. 주요 아이디어는 픽셀을 사용할 수 있다는 것입니다. 이미지를 기준으로 픽셀을 사용해야합니다. 여기서는 이미지 위치 (원하는대로 지정됨)를 가져 와서 화살표 위치를 계산합니다. 그런 다음 약간의 센터링을 사용하여 각 이미지의 정확한 중간을 찾을 수 있습니다.

바이올린 : http://jsfiddle.net/An4TF/10/

jQuery를 : 시작 POS와

$(".nav-image").click(function(event){ 
    var x = $(this).offset().left; 

    var img_width = $(this).width(); 
    var arrow_width = $(".block").width(); 

    var arrow_x = x + img_width/2 - arrow_width/2; 

    $(".block").animate({ 
     "left": arrow_x 
    }, "slow"); 
    }); 

바이올린 : http://jsfiddle.net/An4TF/14/

당신은 선택기 당신이 화살표가 처음에 지적하고 싶어요 마녀의 이미지를 결정하기 위해 변경할 수 있습니다.