Jquery, xml and variables

Question

I'm trying to use xml data to insert as a variable for an animation but am fairly clueless. What am I doing wrong and how far off am I?

    $(document).ready(function(){
    $.ajax({
     type: "GET",
     url: "data.xml",
     dataType: "xml",
     success: function(xml) {
      $(xml).find('mon').each(function(){
       var top = $(this).find('positiontop').text();
       var opac = $(this).find('opacity').text();
       var dur = $(this).find('duration').text();
       $(".mon img").animate({ top: "'+top+'",opacity: '+opac+'}, '+dur+' );
      });
     }
    });
});

and here is my xml

<data>
    <mon>
     <positiontop>180</positiontop>
     <opacity>0.6</opacity>
     <duration>1500</duration>
    </mon>
.....
....
</data>

Answer 1

the animate function sets some sort of callback and your code will continue to run, that will most likely have x number of .animate function calls running at the same time.

Answer 2

Using this slightly changed snippets should help and works for me..

.mon { position:relative; }

.mon img
{
    position:relative;     
}
</style>

<div class="mon">
    <img  src="my_image.gif" />
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
            type: "GET",
            url: "data.xml",
            dataType: "xml",
            success: function(xml) {
                $(xml).find('mon').each(function() {
                   var positiontop = $(this).find('positiontop').text();
                   var opac = $(this).find('opacity').text();
                   var duration = $(this).find('duration').text();
                   $(".mon img").animate({ top: positiontop, opacity: opac }, parseInt(duration));
               });
            }
        });
    });
</script>