Wie kann ich fade ein div mit jQuery?

Habe ich ein div definiert als Folgendes in meine css-Datei:

    #toolbar
    {
        position:relative;
        top: 0;
        height: 50px;
        background-color: #F4A83D;
        width: 100%;
        text-align: center;
        display: hidden;
    }

Dann in meiner HTML-Datei habe ich:

 <div id="toolbar">
        TestApp ToolBar
        <br />
        You are visiting:
        <%=ViewData["url"] %>
    </div>

und schließlich, ich habe Folgendes script ganz oben auf meiner html-Seite, die ich dachte, würde fadeIn div beim laden der Seite:

   <script src="../../Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
   <script type="text/javascript">
        $(document).ready(function() {
            $("#toolbar").fadeIn("slow");
        });
    </script>

Was mache ich falsch? Es zeigt sofort, als ob es war kein fading überhaupt. Bin ich nicht Zugriff auf meine div korrekt in das jquery-script?

Basierend auf einigen der Antworten, die ich geändert habe, meine div:

<div id="toolbar" style="visibility: hidden">
        TestApp ToolBar
        <br />
        You are visiting:
        <%=ViewData["url"] %>
    </div>

Mit dem gleichen script-Aufruf, und jetzt mein div-Element beginnt, sich versteckt und nie zeigt. Was mache ich falsch?

InformationsquelleAutor Mithrax | 2009-04-16

jquery

6

Finden Sie unter: http://www.w3schools.com/css/pr_class_display.asp

versteckt, ist kein Gültiger Wert für die Eigenschaft display. Sie verwenden soll display:none;

Das ist, warum Sie sehen es sofort, es ist nie versteckt worden, weil der browser hat keine Ahnung, was zu tun mit dem display:hidden; Erklärung.

Du vermutlich möchten die visibility:hidden; Eigentum, obwohl da auf diese Weise die Symbolleiste wird unsichtbar, aber gerendert, so dass es dauern wird, es ist Platz im Dokument ein. Die machen sicher, dass Sie die gesamte Seite wird nicht herum geschubst werden, wenn Sie verblassen.

mit "Sichtbarkeit: versteckt" statt "display: none" könnte günstiger sein, da Sie nicht das layout ändern, während Sie unsichtbar.
ust fügte hinzu, dass, während Sie kommentiert. Trotzdem danke.

InformationsquelleAutor Pim Jager
2

Haben Sie zum ausblenden des div-ersten.
```
$('#toolbar').hide().fadeIn('slow');
```
oder so, so dass die Symbolleiste nicht sichtbar sein, während die Seite noch geladen wird:
```
<div id="toolbar" style="visibility: hidden">...</div>

$('#toolbar')
    .css({
        visibility: "visible",
        opacity: 0
    })
    .fadeIn('slow')
;
```
Mit "Sichtbarkeit: versteckt" das div beginnt versteckt und nie zeigt. Ist alles andere falsch?
ich habe aktualisiert mit einer anderen Methode versuchen.

InformationsquelleAutor nickf

$("button").click(function() { 
  $(".element")
  .css({ opacity:0, visibility:"visible" })
  .animate({ opacity:1 }, "slow");
});

InformationsquelleAutor Romualds Cirsis

1

Eine Sache, die ich bemerkt haben, ist dein script-source.
```
<script src="../../Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></
```
sollte
```
<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript">
```
auch
```
display: hidden;
```
ist nicht gültig sein sollte
```
Visibility: hidden;
```
ausblenden element

Versuchen Sie nicht mit einer schließenden script-tag und sehen, was passiert...

InformationsquelleAutor Fatal510

$("#toolbar").css("display","none"); 

$("#toolbar").css("display","block").fadeIn('slow');

oder verwenden Sie animate-Funktion.
In JQuery animieren

InformationsquelleAutor

0

bzw.
display: none;
für das verstecken des Elements.

und der Anzeige:
```
display: block;
```
und abrufen des Elements Status:
```
var state = $("#ex").css("display"); 

if(state == "none")
{
...
}
else
...
```
InformationsquelleAutor

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.