0

i'm having a weird issue which i can't figure out (searching for a solution for 2 hours now).
I'm using a slider, which when slide is selected shows a caption (H3 and p). Everything works fine except opacity ease-in-out on caption elements when using transition-delay property.

In jsfiddle i've setup a demo. When clicked next or previous, the caption elements show up with a delay, but opacity easing on them doesn't work for a smooth transition.

Any help appriciated :)

Improve this question

1 Answer 1

Reset to default
2

Now, this might just be me misunderstanding what you are trying to do, but it seems like you are incorrectly assuming inheritance of the transitions, as well as using imprecise selectors. Basically, the line #test input:checked ~ #full > .caption selects the .caption if any of the checkboxes are checked, i.e always.

In the end, you never really tell the elements to actually animate their opacity.

By rewriting your code a bit, I came up with this which should work a bit better.

As a side note, you shouldn't use duplicate ids (#full), if anything because it will break Javascript if you try to access it. Use space separated classes instead.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Spot on, simple and just what i've needed. I was missing the input selectors for each block and i agree regarding id's, i've changed them.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.