Нажав на фактический элемент, чтобы запустить анимацию

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

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

Answer 3

Нет, событие click может принимать любой элемент:

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

См. Рабочую демонстрацию: http://jsfiddle.net/e4ceD/