jQuery animate to center of elements with varying widths
===

I have been messing around with this all morning, I know little to nothing about jQuery...apologies.

I have four menu items (that are images) that will be contained in a responsive grid. When clicked, I want to have an arrow (in this example it's a box) move to the center of the list-item image that was clicked.

Right now, this javascript is only moving off to the right (I had another version going earlier that moved left/right which is what I want this one to do). Also, the box in this case should always line up centered with the circle that was clicked...despite the width of the screen. That was the big problem...I cannot use pixels or any exact widths.

View Here: 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");
    });


Thanks!