Jquery动画测验

Question

大家好我想问一下jquery代码的动画，我只是学习它并且不知道如何解决它，我认为它对这里的人也有帮助因为它是关于动画的，

将点击的代码写入id为“social”的元素，从顶部0，左侧0，宽度50px，顶部20，左侧20，宽度150px激活，并在2秒后返回其原始位置，包括css和jquery代码（你必须使用“this”）？

代码

$(document).ready(function() { 
    $('#myImage').top('height','20px'); 
    $('#myImage').left({'height':20}); 
    $('#myImage').width(50); //assign 
    $('#myImage').height() //get })

Answer 1

您可以使用delay()和animate()轻松完成此操作。请参阅下面的代码和工作示例：

<强>的jQuery

$(document).ready(function(){
    $("#social").animate({"top":20, "left": 20}).delay(20000).animate({"top":0, "left": 0});
});

<强> CSS：

#social{
    width: 50px;
    height: 50px;
    background: black;
    position: relative;
}

Working Fiddle

Answer 2

尝试

$(function() {
    var timer;
    $('#social').click(function() {
        if (timer) {
            clearTimeout(timer);
        }
        $('#myImage').stop().animate({
            top : '20px',
            left : '20px',
            width : '150px'
        }, function() {
            timer = setTimeout($.proxy(function() {
                $(this).stop().animate(
                    {
                        top : '0',
                        left : '0',
                        width : '50px'
                    })
            }, this), 2000);
        })
    })
})