jquery - 单击实际元素以启动动画

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

您可以直接将点击事件处理程序分配给div^†:

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

然后，当您单击 div 时，动画就会开始。

DEMO

或者如果你想在页面加载时直接运行动画，则直接调用动画函数:

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

<小时/>

†:与用户交互相关的事件(例如点击、鼠标悬停等)适用于所有元素。但还有其他事件，例如 load 或 change，它们仅由某些元素生成。