嗨，大家好我想问一下动画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

相关问题