SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery: Where To Add .slideDown( )? To This?

    I'm trying to add slideDown to http://jsfiddle.net/Jk59f/ so that it slides down smoothly if the dark area is not expanded and just refreshes the link if it is clicked or another link is clicked.

    I haven't been able to figure it out though after testing multiple areas.. it just doesnt slide at all it just jumps!

    How do I do this?

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The slideDown method only works when an element has display: none. So the following will do nothing:

    HTML Code:
    <p>hello, world</p>
    <script>
    $('p').slideDown();
    </script>
    But if you hide the element first, it suddenly works:

    HTML Code:
    <p>hello, world</p>
    <script>
    $('p').hide().slideDown();
    </script>
    One of the most frustrating parts of the slideDown docs (and the jQuery docs in general) is that they don't mention this requirement ;_;

    As far as where to put it, it can be anywhere after you insert the contentTobeLoaded HTML into the #ajax <div>. Of course, you'll still have to tinker with it, because there's an unsightly jump after the content is inserted and hidden, but before it actually slides...

    EDIT

    Ah, you changed it so that the last sentence is actually moot. Good job! All you need to do is add the hide/slideDown calls and you're good.
    Last edited by sdleihssirhc; Dec 17, 2011 at 01:19. Reason: the example was changed! :O
    I'm the web overlord for Graphic Business Systems

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sdleihssirhc View Post
    The slideDown method only works when an element has display: none. So the following will do nothing:

    HTML Code:
    <p>hello, world</p>
    <script>
    $('p').slideDown();
    </script>
    But if you hide the element first, it suddenly works:

    HTML Code:
    <p>hello, world</p>
    <script>
    $('p').hide().slideDown();
    </script>
    One of the most frustrating parts of the slideDown docs (and the jQuery docs in general) is that they don't mention this requirement ;_;

    As far as where to put it, it can be anywhere after you insert the contentTobeLoaded HTML into the #ajax <div>. Of course, you'll still have to tinker with it, because there's an unsightly jump after the content is inserted and hidden, but before it actually slides...

    EDIT

    Ah, you changed it so that the last sentence is actually moot. Good job! All you need to do is add the hide/slideDown calls and you're good.
    http://jsfiddle.net/3NdcE/

    did i place the slideDown in the wrong place?

  4. #4
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by enwise View Post
    did i place the slideDown in the wrong place?
    Nope, but you did forget to hide the element, first. Like this:

    Code JavaScript:
    $('#ajax').html(contentTobeLoaded).hide().slideDown(1000)....
    Last edited by sdleihssirhc; Dec 17, 2011 at 01:41. Reason: clarified meaning
    I'm the web overlord for Graphic Business Systems

  5. #5
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sdleihssirhc View Post
    Nope, but you did forget to hide the element, first. Like this:

    Code JavaScript:
    $('#ajax').html(contentTobeLoaded).hide().slideDown(1000)....
    Ohh I see! you said
    The slideDown method only works when an element has display: none
    so is display: none and .hide() the same?

  6. #6
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by enwise View Post
    so is display: none and .hide() the same?
    Mostly. There's some special stuff that .hide() can do (if you give it a speed, then it animates the hiding; it makes sure to save what the old display was), but it ultimately sets each element's display to none.
    I'm the web overlord for Graphic Business Systems


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
  •