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设置了动画，但不是按照我想要的方式，它的行为非常奇怪。它应该设置到#cart-domains-count坐标的动画，但改为设置到右侧约100px的动画。而且它没有在类中添加，这很奇怪：domainBall.addClass("yo");这让我相信"This"的范围可能不正确，但我不知道为什么它只会向右移动。真的坚持了下来。这也是元素上的css：

.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。