jquery - Jqueryアニメーションクイズ

Question

こんにちは皆さん、jquery コードをアニメーション化する方法についてお聞きしたいのですが、学習したばかりで解決方法がわかりません。これはアニメーションに関するものなので、ここの人々にも役立つと思います。

ID「social」の要素をクリックすると、上 0、左 0、幅 50 ピクセルから上 20、左 20、幅 150 ピクセルにアニメーション化し、2 秒後に元の位置に戻るコードを記述します。css と jquery を含めます。コード（「これ」を使用する必要があります）？

コード

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