Ausführen von JavaScript auf jedem Element mit CSS-Klasse funktioniert nicht

Question

Ich versuche, ein Javascript auf jedem Element auf einer asp.net-Seite, die eine bestimmte CSS-Klasse hat. Ich bin nicht sehr gut mit Javascript, also weiß ich nicht, warum es nicht funktioniert. Ich erstelle dynamisch Steuerelemente und füge die CSS-Klasse hinzu, und die Klasse wird an ein statisches Steuerelement auf der Seite angehängt.

Ich möchte nur, dass die Steuerelemente nach dem Laden der Seite eingeblendet werden.

Hier ist mein Skript:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.fadeInLoad').each(function (i, obj) { 
      $(this).fadeIn(); 
     }); 
    }); 
</script> 

Hier ist meine CSS:

.fadeInLoad 
{ 
    color:#0d0d0d; 
} 

Danke für jede Hilfe bieten kann.

Answer 1

Sie müssen display auf none auf der Klassenregel setzen. Andernfalls versucht es, ein bereits sichtbares Element einzublenden.

Auch, wie @Blazemonger darauf hingewiesen hat, rufen Sie einfach .fadeIn() direkt auf den jQuery Selektor aufrufen.

Hier ist ein Beispiel

$(document).ready(function() { 
 
    $('.fadeInLoad').fadeIn(2000); 
 
});

.fadeInLoad { 
 
    color: #0d0d0d; 
 
    display: none; /* This display needs to be here */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>Does not fade in</div> 
 
<div class="fadeInLoad">Fades In</div> 
 
<div class="fadeInLoad">Fades In</div> 
 
<div class="fadeInLoad">Fades In</div> 
 
<div class="fadeInLoad">Fades In</div> 
 
<div class="fadeInLoad">Fades In</div> 
 
<div class="fadeInLoad">Fades In</div> 
 
<div class="fadeInLoad">Fades In</div>

Answer 2

Für mich ist es funktioniert. Diese Knoten mit der Klasse dadeInLoad befinden sich in der Quelle der Seite oder werden mit einigen Ajax geladen?

Es arbeitet Demo:

Demo

$(document).ready(function() { 
     $('.fadeInLoad').each(function (i, obj) { 
      $(this).fadeIn(3000); 
     }); 
    });