[SOLUCIONADO] Margen basado en valor de input

[stramin]

Hola!

Estoy tratando de hacer una animación con un valor dependiente de un campo de texto dentro del mismo elemento que quiero editar :

Lo que busco es que el margen sea dependiente del valor de un campo

creo que se entenderá mejor con el código, lo he intentado de varias formas y ninguna funciona.

Este es uno de mis intentos:

Código Javascript:

$('.ava_bar').animate({marginLeft: $(this).find('.toperc').val() + 'px'},400);
 

Al ver que no funciona he intentado este:

Código Javascript:

$('.ava_bar').ready(function(){
    var marg=$(this).find('.toperc').val();
    $(this).animate({marginLeft: marg + 'px'},400);
});
 

Este es el HTML:

Código HTML:

<div class="ava_bar">
<input id="topercgps" class="toperc" name="toperc" type="hidden" value="50">
</div>
 

Sin lograr buenos resultados

Espero puedan ayudarme, gracias.

[stramin]

Solucionado

No se por que pero hay que poner el campo en una variable o no funcionará:

Código Javascript:

$('.ava_bar').each(function(){
    
    $(this).animate({marginLeft: $(this).find('.toperc').val() + 'px'},400);
    alert("no funciona");
    
    var a = $(this);
          
    $(this).animate({marginLeft: a.find('.toperc').val() + 'px'}, 400);
    alert("ahora si funciona :S");
});