單擊實際元素，開始動畫

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