jQuery元素动画为子值？

Question

我想点击a.go，然后有一系列div，所有类似.box的动画效果都是父级.box中输入的百分比

所以我看起来像这样：

<a class="go" href="#">go!</a>

<div class="box><input type="hidden" value="50"/></div>
<div class="box><input type="hidden" value="90"/></div>
<div class="box><input type="hidden" value="20"/></div>
<div class="box><input type="hidden" value="60"/></div>


       $('a.go').click(
        function() {
               $('.box').animate({
                    "left": "50%"
                     }, 2000);
            }
       ); 

所以现在我可以将它们全部动画50％，但我希望将它们设置为其输入值的动画。我该怎么用？每（）？

Answer 1

像这样？

$('a.go').click(function() {
    $('.box').each(function() {
         $(this).animate({ left: $('input', this).val() + '%' }, 2000);
     });
});