Question

Here is my HTML

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

and my CSS

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

and the script

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

How can I activate this animation without using a button? I want to click the div #test and animate it to 300×300. I tried using a link and a label, but it seems that the click handler only understands a button click.

Answer 1

You can directly assign the click event handler to div^†:

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

Then when you click the div, the animation will start.

DEMO

Or if you want to run the animation directly when the page loaded, call the animation function directly:

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

---

†: Events related to user interaction such as click, mouseover, etc. work with all elements. But there are other events, such as load or change, which are only generated by certain elements.