jsquery delay() not working on a set of a elements selected from class-CodePudding

Why doesn't the delay nor the fadeIn work in the below code?

I've tried wrapping it with the queue function to no avail - and I know the .middle-man class selection and .each is working OK because console.log(this) returns the correct a elements - so why is there no delay and no fade in? I've tried each on their own too, I've tried initial opacity = 0, hidden ... with the result always being the same: instant execution of the script and instant display of the elements!

$(".middle-man").each(function() {
  $(this).delay(1000).fadeIn(3000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a  href="">
  <p>SOme Stuff</p>
</a>
<a  href="">
  <p>SOme Stuff</p>
</a>
<a  href="">
  <p>SOme Stuff</p>
</a>

CodePudding user response：

The content is already visible that is why Jquery will not fade in. Try adding a style to the class to hide the links.

.middle-man {
  display: none;
}

OR inline

<a  href="" style="display:none;">
  <p>SOme Stuff</p>
</a>