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/

你可以改变选择，以确定你想要的箭头开始指向女巫形象。