这是代码:
<div id="round"></div> <style> #round{ position: absolute; width: 200px; height: 200px; border-radius: 50%; left: 400px; top: 200px; background-color: #e1e1e1; } </style> <script src="jquery.js"></script> <script src="jquery.easing.1.3.js"></script> <script> $(document).ready(function(){ $("#round").click(function(){ setInterval(function(){ $("#round").animate( {height: 250, width: 150, top:150, left: 425}, {duration: 300} ). animate( {height: 200, width: 200, top:200, left: 400}, {duration: 300} ); }, 0); }); }); </script>
但是当我将“ #round”更改为“ this”时。它不会工作。为什么?(实际上是可行的,但是当我将它们放入setInterval()时,它将无法工作)
$(document).ready(function(){ $("#round").click(function(){ setInterval(function(){ $("#round").animate( {height: 250, width: 150, top:150, left: 425}, {duration: 300} ). animate( {height: 200, width: 200, top:200, left: 400}, {duration: 300} ); }, 0); }); });
更改为“ this”,将无法使用。
$(document).ready(function(){ $("#round").click(function(){ setInterval(function(){ $(this).animate( {height: 250, width: 150, top:150, left: 425}, {duration: 300} ). animate( {height: 200, width: 200, top:200, left: 400}, {duration: 300} ); }, 0); }); });
this 是对调用当前函数的成员的引用…
this
那么您可以将其包装在jquery函数中$()以选择它,就像选择其他选择器一样。
$()
因此setInterval调用匿名函数,这样它就不会被可引用成员调用,因此它默认为该window对象。
setInterval
window
将this上下文保存在变量中,然后像这样在内部使用它…
$(document).ready(function(){ $("#round").click(function(){ var clicked = this; //<----store the click context outside setInterval setInterval(function(){ $(clicked).animate( //<----------use it here {height: 250, width: 150, top:150, left: 425}, {duration: 300} ). animate( {height: 200, width: 200, top:200, left: 400}, {duration: 300} ); }, 0); }); });