SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru downtroden's Avatar
    Join Date
    Dec 2004
    Location
    illinois
    Posts
    970
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery .animate and using variable for value

    So I'm wanting my element to start out as 50px in height and then on click go to height:"auto". I've read that I can't do the auto, so i've set a variable that gets the height of the element. BUT, i'm having issues getting the variable to work in the .animate() function.

    Am I doing something wrong or can .animate not handle variables at all?

    Code JavaScript:
    $('div.job_description').css("height","50px");
     
    $("h3.job_title").toggle(function () {
         var box_height = $(this).next().height();
         $(this).next().animate({height:box_height},{queue:false,duration:500});
    },
    function () {
         $(this).next().animate({height:"50px"},{queue:false,duration:500});
    });
    your brain reacts in the same way whether you are
    looking at something or thinking about it...

  2. #2
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It won't work because the height is already set to 50 px. So when you measure the height again its still going to be 50px.

    You could measure the height and save it before setting the height as 50px using the data method.

    Code:
    for (i=0; i<$('div.job_description').length; i++){
            $obj = $('div.job_description').eq(i);
            ht = $obj.height();
            $obj.data('ht', ht).height('50px');
    }


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
  •