座標設定でjqueryアニメーションが正しく機能しない

Question

クリックして特定の座標に要素をアニメーション化しようとしています。ここに私の機能は次のとおりです。

    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); 

        }; 

私はそうのような関数を呼び出す：

<span onClick="animateToCart()">Add To Cart »</span> 

div要素がアニメーション化ではなく、私が望むように、そのbehaviousはかなり奇妙です。それは#cart-domains-countの座標にアニメーションする必要がありますが、約100ピクセルほど右にアニメーションが適用されます。また、それは非常に奇妙なクラスで追加されていません：domainBall.addClass("yo");これは私が "this"の範囲が多分正しいとは思わないかもしれないと信じていますが、なぜそれが右に移動するのかわかりません。本当にこのことに固執しています。ここでは、CSSはaswell要素である：

.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; 
} 

はHTML：

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

Answer 1

HTML要素のすべてを自然にインラインで表示されます。それらをdisplay: blockに変更してみてください。