JavaScript Wie JS debuggen (jQuery UI Effect spielt nicht ab)

[Falc410]

Ich bin was Webentwicklung angeht ein absoluter Anfänger. Ich habe ein Django (Python) Project und möchte Nachrichten einblenden lassen oder mit einem anderem Effekt hervorheben. Das soll automatisch passieren sobald die Seite geladen ist.

{% if messages %}
    <div id="msg">
       <ul class="messages">
           {% for message in messages %}
              <li>{{ message }}</li>
          {% endfor %}
       </ul>
     </div>
{% endif %}

Und ganz am Ende von meinem Template habe ich:

<script>$( "#radioset" ).buttonset();
$("#msg").fadeIn("slow");</script>

Das Buttonset (auch eine Funktion von jQuery UI) wird korrekt dargestellt. Der FadeIn Effekt ist aber nicht zu sehen. Ich hab das Div auch schon in <li> aufgenommen - hat auch nicht funktioniert. Der Text wird einfach immer direkt angezeigt.

Nun sitze ich mit Chrome und Developers Tools bzw. Firebug da und sehe keine Fehlermeldung und hab keine Ahnung wie man so etwas nun debugged.

 

[Cool Master]

Bzgl. des Fehlers:

jQuery Version korrekt für den Effekt?


Edit:

poste mal dein CSS zu #msg. Dies muss erst einmal "display:none" haben damit der fade in passieren kann

 

[Falc410]

Ah, das ergibt Sinn. Ich hatte noch gar kein CSS dafür definiert. Ok nun funktioniert das. In dem Fall hätte ich wohl auch selber drauf kommen können. Aber in den Examples war das auch nicht definiert, bzw. da wurden halt nach einem Buttonclick das Script ausgeführt.

 

[Cool Master]

http://www.w3schools.com/jquery/jquery_fade.asp

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadein

Da ist es dabei


<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>