Page 55 of JQuery Novice to Ninja shows the following code. When the page is run you CLICK on the first paragraph and the animation is triggered BUT I do not see any CLICK EVENT in this script. Isn’t the document.ready function the trigger? What am I missing? I have read the forum guidelines and I do not see a specific place to ask for tech support for specific questions regarding a Sitepoint book.
$(document).ready(function(){
$(‘p:first’).toggle(function() {
$(this).animate( {‘height’:‘+=150px’}, 2000, ‘linear’)
}, function() {
$(this).animate( {‘height’:‘-=150px’}, 2000, ‘swing’);
});
});
1 Like
It is indeed a little confusing at first glance, because there are two .toggle() methods.
The one most people are familiar with is the animation method that’s used to toggle an elements’ visibility. (See: http://api.jquery.com/toggle/)
The other is an event handler that binds to the click event and will fire alternate event handlers when the targeted element is clicked.
As per http://api.jquery.com/toggle-event/:
Description: Bind two or more handlers to the matched elements, to be executed on alternate clicks.
Wow. Thank you. Clearly that should have been pointed out in the book! You saved y mental health!