JQuery loads fine on CodePen, not on my browser

Maybe I am missing some code? I have the snippets inside the JS window and everything works fine. It’s not loading once I move the coding inside of my HTML under tags and test on my browser. I’ve been troubleshooting but no luck.

Can anyone help?

ttps://codepen.io/motleyrue/pen/WWydmQ

I don’t use Jquery too often but it seem like you are missing the document ready around you code:

$(document).ready(function(){
YOUR CODE HERE
  });

lazyload is not part of the jQuery library. It is a plug-in, so you need to add a link to the plug-in.

https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js

Thanks. This works fine in the Codepen. Not so much in my GitHub page which I’m loading in Chrome. hmmm

can you post a link to the github repo? Have you linked all your libraries in the html file?

Sure. Heres the repo.

The opacity is being added to the elements but you didn’t set a starting opacity in the CSS.

It is however not working for the <i> element, not sure why the .last() is working on Codepen but not the Github page. If you are only going to have one icon inside the h1 then you can just change the selector to $('h1 > i').

$('h1 > i').delay(400).animate({'opacity':'1'},600);

Thats what I get for working across both CodePen and GitHub. Opacity: 0 was in CodePen. All is working now. Thanks!