Question

这里是fiddle。

此问题是this question的后续问题。

我有一个按钮类型=＆＃34;图像＆＃34;当用户点击它时，用一个整洁的小动画。但是，为了使动画工作，我必须使按钮位置：绝对。

问：当用户按下按钮时，我可以设置位置：绝对吗？我不知道按钮在页面上的位置，因为它位于长列表的底部。

(function() {
    $(document).on('click','#save',clicked)
    function clicked(myEvent) {
        myEvent.preventDefault()

        $(this).attr('src','http://www.PhillipSenn.com/GetupAGame/Inc/png/emojiTennisBallShaved.png')
        $(this).addClass('serve')
    }
})()

如果我只是更改位置属性，它是否会跳到页面上？

Answer 1

如何做$(this).css('position', 'absolute');？

(function() {
    $(document).on('click','#save',clicked)
    function clicked(myEvent) {
        myEvent.preventDefault()

        $(this).css('position', 'absolute');

        var local = {}
        local.width = ["50px", "swing" ]
        local.height = [ "50px", "swing" ]
        local.top = "-64px"
        $(this).animate(local,"slow")
    }
})()

Answer 2

备注中的注释：

(function() {
    $(document).on('click','#save',clicked)
    function clicked(myEvent) {
        myEvent.preventDefault()

        //save buttons calculated position:
        var _ball_x = $(this).offset().left;
        var _ball_y = $(this).offset().top;

        //set balls position to absolute and back to its calculated position:
        $(this).css({
            "position":"absolute",
            left:_ball_x,
            top:_ball_y
        });
        $(this).attr('src','http://www.PhillipSenn.com/GetupAGame/Inc/png/emojiTennisBallShaved.png')
        $(this).addClass('serve')
    }
})()

现场演示： Fiddle

尝试从.css()函数中删除left / top属性，并查看在将更改定位到absolute时它是如何跳转的。

你如何改变相对于绝对的位置？

2 个答案: