jQuery: Target nth-child and fade out

//From codecademy.com $(document).ready(function() { var $target = $('ol li:nth-child(4)'); $target.fadeOut('fast'); });

2 Responses

What about this (?):

// As you have jQuery...
$(document).ready(function() {
$('ol li:nth-child(4)').toggleClass('visible);
});

// SASS
&.visible {
opacity: 1;
transition: opacity 0.2s;
}

CSS transition work really well. If you need to animate positions, I strongly suggest you to use CSS3 transitions with the CSS3 property transform: translateX etc.... This way you won't get any kind of flickering/lag ;)

That's simply because I hate to animate/fade/show/hide elements using jQuery. It's my personal opinion, but there's no added value to jQuery now that ES6 is out. Just a shorter syntax really.. Which is convenient I agree, but it has its downside as well. Have a look here: https://plainjs.com/
Thanks Dan! I'll check it out.

I'm currently trying to learn as much as a can about vanilla JS....one step at a time.

Cheers:-)

Write a comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.