jquery animation not working correctly with setting coordinates
<p>I'm trying to animate an element on click to specific coordinates. Here is my function:</p>

<pre><code>                    function animateToCart(event) {

                    var domainBall = jQuery(this).parent(".addtocart").siblings(".domain-animation");
                    domainBall.addClass("yo");

                    var getCoordinates = document.getElementById("cart-domains-count").getBoundingClientRect();

                    var leftcoord = getCoordinates.left;
                    var rightcoord = getCoordinates.right;
                    var topcoord = getCoordinates.top;
                    var bottomcoord = getCoordinates.bottom;

                    domainBall.attr("styles","top:" + leftcoord + "px");


                    domainBall.animate({
                       'left': leftcoord,
                       'right': rightcoord,
                       'top': topcoord,
                       'bottom': bottomcoord
                    }, 500);

                    };
</code></pre>

<p>I call the function like so:</p>

<pre><code>&lt;span onClick="animateToCart()"&gt;Add To Cart »&lt;/span&gt;
</code></pre>

<p>The div animates but not in the way I want and its behavious is pretty strange. It should animate to the coordinates of <code>#cart-domains-count</code> but instead animates to the right about 100px. Also it is not adding in the class which is very strange: <code>domainBall.addClass("yo");</code>This leads me to believe that maybe the scope of 'this' is maybe not correct but then I don't know why it would move only to the right. Really stuck on this one. Here is the css on the element aswell:</p>

<pre><code>.domain-animation {
    position: absolute;
    height: 20px;
    width: 20px;
    background-color: Red;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;a href="#" class="addtocart"&gt;&lt;span onClick="animateToCart()"&gt;Add To Cart »&lt;/span&gt;&lt;/a&gt;
&lt;a href="#" class="register-this-domain"&gt;Register »&lt;/a&gt;
&lt;span class="domain-animation"&gt;&lt;/span&gt;
</code></pre>