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");
});

单击实际元素以启动动画

3 个答案: