Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jul 2009
    Location
    Chicago, IL
    Posts
    169
    Thanks
    26
    Thanked 3 Times in 3 Posts

    prependTo,fadeIn, and slideDown

    I am attempting to prepend a div to another div. I want the div's elements to slide down, and then have the newly prepended element faded in. Here's what I have, but it's not working.

    Thanks!

    Code:
    $(xmlhttp.responseText).hide().prependTo("#new_ideas").slideDown("slow").fadeIn("slow");
    Last edited by wldrumstcs; 10-24-2010 at 03:17 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    In what way is it not working?

    The slideDown() function will make the new element appear - so the subsequent fadeIn() will have no effect - is that the problem?

  • #3
    Regular Coder
    Join Date
    Jul 2009
    Location
    Chicago, IL
    Posts
    169
    Thanks
    26
    Thanked 3 Times in 3 Posts
    Yes. The new element isn't fading in, which is what I'm trying to do. I don't want slidedown to automatically show the new element.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    That's what slideDown does, unfortunately. Is there any reason not to just use fadeIn and remove the slideDown entirely?

  • #5
    Regular Coder
    Join Date
    Jul 2009
    Location
    Chicago, IL
    Posts
    169
    Thanks
    26
    Thanked 3 Times in 3 Posts
    I would like to keep both (even if I have to hack it to work correctly). I like the animation of the current contents sliding down to make room for the new element, and then the new element fading into view.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Have a try with:

    Code:
    $(xmlhttp.responseText).hide().prependTo("#new_ideas").css({opacity:0}).slideDown("slow").animate({opacity:1},"slow");
    Setting the opacity to 0 before the slideDown allows the element then to be faded in with animate.

  • Users who have thanked SB65 for this post:

    wldrumstcs (10-24-2010)

  • #7
    Regular Coder
    Join Date
    Jul 2009
    Location
    Chicago, IL
    Posts
    169
    Thanks
    26
    Thanked 3 Times in 3 Posts
    That works! Thank you so much!!


  •  

    Posting Permissions

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