单击实际元素，开始动画

Question

这里是我的HTML

<div id="test">There I dont want put button</div> 

和我的CSS

#test { width: 300px; height: 100px; } 

和脚本

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("button").click(function(){ 
    $("#test").animate({height:300},"slow"); 
    }); 
}); 
</script> 

我怎样才能激活此动画无使用按钮？我想点击div #test并将其设置为300x300。我尝试使用链接和标签，但似乎点击处理程序只理解按钮单击。

Answer 1

可以直接给click事件处理程序的div ^†：

$(function() { 
    $('#test').click(function() { 
     $(this).animate({height:300},"slow"); 
    }); 
}); 

然后当您单击DIV，动画将开始。

DEMO

或者，如果你想直接运行动画加载页面时，直接调用动画功能：

$(function() { 
    $("#test").animate({height:300},"slow"); 
}); 

---

†：与用户的交互，例如click活动， mouseover等与一起使用全部元素。但还有其他事件，例如load或change，它们只能由某些元素生成。

Answer 2

没有，click事件可以采取的任何元素：

$(document).ready(function(){ 
    $("#test").click(function(){ 
    $("#test").animate({height:300},"slow"); 
    }); 
}); 

看到一个工作演示： http://jsfiddle.net/e4ceD/

Answer 3

$('#test').click(function(){ 
    $(this).animate({height:300},"slow"); 
});