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");这让我相信“这个”的范围可能不正确，但后来我不知道为什么它只会向右移动。真的坚持这一个。这是元素上的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。

jquery动画与设置坐标无法正常工作

1 个答案: