嗨，大家好我想問一下動畫jQuery代碼，我只是學習它，不知道如何解決它，我認爲這也會對這裏的人有所幫助，因爲它是關於動畫，，Jquery動畫測驗

編寫代碼點擊一個id爲「社交」動畫的元素，從頂部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 })

來源

2013-04-25 Learner

$（document）.ready（function（）{ \t \t $（'animate'）.css（'top'，'0px'）; $（'animate'）。css（{'left'：0}）; \t \t $（'animate'）。width（50）; \t \t $（'animate'）。left（20）; \t \t $（'animate'）。left（150）; }）不確定是否正確，因爲我今天剛剛學習jquery – Learner 2013-04-25 03:12:27

你需要一個點擊處理程序'＃社會' – tymeJV 2013-04-25 03:14:24

嘗試

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

來源

2013-04-25 03:20:29

我需要使用方法「this」，這就是目前爲止的問題 – Learner 2013-04-25 04:42:17

你想在哪裏使用'this' – 2013-04-25 04:42:48

@Learner看到更新 – 2013-04-25 04:44:29

爲此，您可以輕鬆地使用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

來源

2013-04-25 03:19:14

非常感謝你 – Learner 2013-04-25 03:49:02

Jquery動畫測驗

回答

Working Fiddle

相關問題