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 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2013
    Location
    Bristol, UK
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS Transition Issue

    Hi,
    I'm using a css transition to show and hide text via a button.
    For some reason though on the show transition in pauses for about a second before it shows the rest of the content.

    Any idea why that is?

    You can view the problem here: http://jsfiddle.net/Rd9h2/3/

  • #2
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    For margins and paddings, percentages are all relative to the width. It might seem very counter-intuitive, but that's the way it works. Lol.

    As a result, let's take a look at this.

    Code:
    .spoilerbutton[value="Show"] + .spoiler > div {margin-top:-100%;}
    Naturally, most people think that it's hidden directly above the intended area, but it's actually far above the actual area because the 100% is relative to the width, not the height. Lol. Use Firebug and go to Metics to take a look at the margin's value.

    Anyway, when you click "Show", the padding immediately shows. That's where you get the immediate red box. Then, you have to wait for the actual div to fall down all the way from the top. That's the delay.
    My signature :)

  • Users who have thanked ttkim for this post:

    ChrisL_57 (04-29-2013)

  • #3
    New Coder
    Join Date
    Jan 2013
    Location
    Bristol, UK
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ahh, I see now. Thanks!


  •  

    Tags for this Thread

    Posting Permissions

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