Almost completed the challenge, but have a few issues with fine tuning the CSS and a bit of animation.
I would like to animate the search results into view. I’ve tried wrapping the loop in a slideDown() method, but apart from that, not sure what to do to get it sliding down from the top? Or to do anything for that matter.
When hovering over the search results, the background color kicks in with a weird delay on two separate parts of the container. There are two different background colors even though I’ve only specified one background color and transition? I would like it to fade in all at once?
Is there any way to disable the hover effects on mobile? I’ve seen a few very elaborate fixes online, but they seem like way too much overkill for something that in theory, should be relatively simple.
So basically, when I type my text into the search box and fire off the click event, I would like the results to fadeIn or slideDown etc rather than just appear.
Mmm… You could set the default class of all the results to “hidden” and then using javascript get all the “hidden” elements and iterate through them and changing the class to “visible”, and add some transition effects of javascript… just be creative!
The class idea might work. I’ve used it before, don’t know why I didn’t think of it earlier. Thanks! I’ve tried wrapping my loop in a jquery animation method, but it didn’t work, will give the class idea a spin.
Right, I’ve sorted out how to fade in the background color on each result (number 2), but I am still having trouble with fading in the results as a whole(number 1). I’ve tried adding a class on click to give the container full opacity, but this does not seem to work. Any ideas? I don’t want to use JavaScript for this, it should be simple enough with CSS.
