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 class="middle-man" href="">
<p>SOme Stuff</p>
</a>
<a class="middle-man" href="">
<p>SOme Stuff</p>
</a>
<a class="middle-man" href="">
<p>SOme Stuff</p>
</a>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 class="middle-man" href="" style="display:none;">
<p>SOme Stuff</p>
</a>