jquery - Jquery 动画测验

Question

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

编写代码，点击一个id为“social”的元素，从top 0、left 0、width 50px到top 20、left 20、width 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;
}

工作小提琴

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);
        })
    })
})