jQuery動畫元素的中心寬度變化不定

Question

我一直在搞這個整個早上，我對jQuery一無所知......道歉。

我有四個菜單項（即圖像），將包含在響應式網格中。點擊時，我想要一個箭頭（在這個例子中是一個盒子）移動到被點擊的列表項目圖像的中心。

現在，這個JavaScript只是向右移動（我有另一個版本更早前移動左/右，這是我想要這樣做）。而且，在這種情況下，盒子應該始終與被點擊的圓圈居中對齊......儘管屏幕寬度很大。這是個大問題......我無法使用像素或任何確切的寬度。

查看這裏：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

你與你最初的實施非常接近。我簡化了邏輯，爲每個導航項添加一個類。主要思想是你可以使用像素，你只需要它們相對於你的圖像。在這裏，我正在拍攝圖像位置（以您希望的任何方式指定），並基於此計算箭頭的位置。然後以一箇中心點爲中心，我們可以找到每個圖像的確切中間位置。

小提琴：http://jsfiddle.net/An4TF/10/

的jQuery：

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

撥弄起POS：http://jsfiddle.net/An4TF/14/

你可以改變選擇，以確定你想要的箭頭開始指向女巫形象。