SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery Ninja questions re toggle and animate

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

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow. Thank you. Clearly that should have been pointed out in the book! You saved y mental health!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •