javascript - 获取元素的结束位置。动画结束时的位置。在 OOP Javascript/jQuery 中

Question

我想获取对象的结束位置。所以动画完成时的顶部和左侧位置。我想直接获得该位置，而不是在动画完成后。

我想做这个面向对象的。

这就是我得到的:

(function($) {

    Block = function() {

        this.el = $('<div></div>');
        this.el.css('position', 'relative');

        }

    Block.prototype.appendTo = function(parent) {

         this.el.appendTo(parent);
         return this;
    }

    Block.prototype.setSize = function(w, h) {

         this.el.css('width', w); 
         this.el.css('height', h);
         return this;    
    }

    Block.prototype.setPosition = function(x, y, speed) {

        speed = speed || 0;
        this.el.animate({'left': x+ 'px', 'top': y+ 'px'}, speed);
        return this;
    }

    Block.prototype.getPosition = function() {

        var left = this.el.position().left;
    var top = this.el.position().top;
    return [left, top];
    }



})(jQuery);

当我用这个类创建一个 block 并使用console.log记录位置时，我就得到了 block 起点的位置。我想获得最终位置。直接

var block1 = new Block
block1.appendTo('body')
        .setSize(100,50)
        .setPosition(200, 300, 3000);


console.log(block1.getPosition());

所以 console.log = [0, 0] 我希望它是 [200, 300]

Answer 1

您可以使用data()来存储与元素相关的数据:

(function($) {
    Block = function() {
        this.el = $('<div></div>');
        this.el.css('position', 'relative');
    }

    Block.prototype.appendTo = function(parent) {
         this.el.appendTo(parent);
         return this;
    }

    Block.prototype.setSize = function(w, h) {
         this.el.css({width: w, height: h}); 
         return this;    
    }

    Block.prototype.setPosition = function(x, y, speed) {
        speed = speed || 0;
        this.el.data({top: y, left: x}).animate({'left': x+ 'px', 'top': y+ 'px'}, speed);     return this;
    }

    Block.prototype.getPosition = function() {
        return [this.el.data('left'), this.el.data('top')];
    }
})(jQuery);

FIDDLE