Question

I’m trying to create a particular effect – where essentially various elements move around within a parent element. The overall intention is that I have a kind of PONG style movement, where the elements collide with the edge of the parent object and redirect themselves. (possibly even colliding with each other).

This is the code I’ve been working on (which I am aware does nowhere near what I’ve described above.) At this stage I am merely trying to animate movement and then access the new top and left coords in order to determine whether the element has exceeded set limits.

$(document).ready(function() {
    $('.collisionmenu li')
    .attr("left", 0).attr("top", 0)
    .attr("xforce", 10).attr("yforce", 10)
    .click(function() {
        //alert($(this).attr("top"));
        if($(this).attr("top") > 50) $(this).attr("yforce", -10);
        $(this).animate({
            left: '+=' + $(this).attr("xforce"),
            top: '+=' + $(this).attr("yforce")
        }, 100);
    });
});

The problem I’m having is that the top attribute always seems to be set to “0” despite several iterations of the “click()” function being run and the visible movement of the element in question.

I am assuming that JQuery does not alter the elements DOM properties when it animates the movement and the relocation data is held somewhere else. So what I need to know is how I can find out the updated position of an animated object order that I can carry out changes based on the current values/position.

In addition, as is hopefully clear from the code, I have taken to setting invented properties “xforce” and “yforce” to each element in order to accommodate varied speeds when there is more than one element being animated. Is this an acceptable practice or am I likely to run into problems doing this at a later stage?

I’m not sure if this kind of thing is already available (searches yielded nothing), but in honesty I’m more interested in understanding the workings than actually achieving the effect. Its more of a learning exercise.

Many Thanks, and apologies if this description isn’t particularly clear.

Answer 1

The problem you are having is that you check an attribuate that never is changed. What you are really wanting is to check for the element’s top value. Do this with the css property.

if($(this).css("top") > 50) $(this).attr("yforce", -10);

Suggestion

Use the css("top") always instead of the .attr("top") because you are trying to do the same thing.

Also, I would use the .data("yforce", 10) to store your force values. There is no reason to change the element’s attributes for this.