页面加载时JQuery fadeIn()方法失效问题求助

Hey there! Let's get that fade-in effect working for you. I've spotted a few small issues in your code that are preventing it from running correctly:

Key Problems in Your Code #

• Incorrect Window Selector: You used $('window')—but window is a global browser object, not an HTML element, so it shouldn't be wrapped in quotes. The correct selector is $(window).
• Redundant Event Nesting: Wrapping window.load inside $(document).ready() is unnecessary. Both events wait for different loading states, but for your text fade-in, you only need one of them. $(document).ready() is enough here since you're targeting DOM content that loads early.
• Missing Initial Hidden State: The fadeIn() method animates elements from hidden to visible. Your .fadeInLoad element is visible by default, so there's no animation to see! You need to hide it first.

Corrected Code #

Step 1: Add CSS to Hide the Element Initially #

Add this to your stylesheet to make sure the element starts hidden:

.fadeInLoad {
  display: none;
}

Step 2: Simplify Your jQuery Code #

Replace your existing JavaScript with either of these options:

Option 1: Use $(document).ready() (DOM-ready trigger)

$(document).ready(() => {
  $('.fadeInLoad').fadeIn();
});

Option 2: Use $(window).load() (Full page load trigger, if you need to wait for images too)

$(window).on('load', () => {
  $('.fadeInLoad').fadeIn();
});

Why This Works #

• The CSS ensures the element is hidden when the page loads, giving fadeIn() something to animate.
• We removed the redundant event nesting, so the code runs at the right time without conflicts.
• The corrected window selector (if you use option 2) targets the actual browser window object correctly.

Give this a try, and your welcome text should fade in smoothly when the page loads!

内容的提问来源于stack exchange，提问作者JShepherd