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%;
}​

查询：

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

拨弄起始位置：http://jsfiddle.net/An4TF/14/

您可以更改选择器以确定您希望箭头最初指向的女巫图像。