JavaScript中加载动画失效求助：JSFiddle可正常运行

Hey there! It’s super frustrating when something works smoothly in a playground like JSFiddle but breaks in your actual project—let’s break down the most likely culprits and fix this step by step.

1. DOM Loading Timing Mismatch #

JSFiddle automatically wraps your code in a DOM-ready handler (like $(document).ready()) by default, but your local project might not be doing this. If your JavaScript runs before the #table element exists in the DOM, calls like document.getElementById('table') or $("#table") will return nothing, and your animation can’t attach to any valid element.

Fix: Wrap your entire code in a DOM-ready block, or move your script tag to the bottom of your HTML (right before </body>):

$(document).ready(function() {
  $.getJSON('/post', function(data) {
    $('#table').empty(); // Cleaner than setting innerHTML to ""
    const tbs = $("#table");
    
    $.each(data.data, function(i, mod) {
      // First add the element to the DOM
      tbs.append(`<tr><td><div class="loading-container"><div class="progress"></div><div class="content">Loading</div></div></td></tr>`);
      
      // Grab the newly added container
      const latestContainer = tbs.find('.loading-container').last();
      
      // Run the animation on this specific container
      loadingAni(latestContainer, 4000);
    });
  });
});

2. Missing CSS for the Animation #

JSFiddle might have included the CSS styles for .progress and .content in its editor, but your local project probably doesn’t have them. Without keyframe animations or basic styling, the loading bar won’t animate at all—it’ll just sit there invisible or static.

Fix: Add this CSS to your project’s stylesheet:

.loading-container {
  width: 200px; /* Adjust to fit your layout */
}

.progress {
  height: 4px;
  background-color: #2196F3;
  width: 0;
  animation: progressFill 4s linear forwards;
}

@keyframes progressFill {
  100% { width: 100%; }
}

.content {
  margin-top: 8px;
  font-size: 14px;
}

3. Duplicate IDs Breaking Element Selection #

In your original code, you’re using id="myDivId" inside a loop—this creates multiple elements with the same ID, which is invalid HTML. When loadingAni tries to select #myDivId, it’ll only ever grab the first one, so subsequent animations won’t target the right elements.

Fix: Replace the fixed ID with a class (like loading-container as I did above) or generate unique IDs dynamically:

// Example with unique IDs
tbs.append(`<tr><td><div id="loading-${i}"><div class="progress"></div><div class="content">Loading</div></div></td></tr>`);
const latestContainer = $(`#loading-${i}`);
loadingAni(latestContainer, 4000);

4. Animation Function Doesn’t Target Dynamic Elements #

Your original loadingAni function might be hardcoded to look for a fixed ID, which won’t work when elements are added dynamically after the page loads. It needs to be flexible enough to target specific elements you pass to it.

Fix: Update loadingAni to accept a DOM element as a parameter, so it can target the specific container you just added:

function loadingAni(container, duration) {
  const progressBar = container.find('.progress');
  const contentText = container.find('.content');
  
  // Adjust animation duration if needed
  progressBar.css('animation-duration', `${duration}ms`);
  
  // Update text when animation finishes
  setTimeout(() => {
    contentText.text('Loaded!');
  }, duration);
}

Go through these steps one by one—chances are one of these is the root cause of your issue. Start with checking the DOM timing and CSS first, since those are the most common pitfalls when moving code from JSFiddle to a local project.

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