Jquery .show () enthüllt kein Div mit der Sichtbarkeit von versteckt

Question 1

Grundlegende jQuery-Frage:

Ich versuche, eine zu enthüllen div, die mit jQuery als versteckt markiert wurde. Aber ich verstehe es nicht ganz

Ich habe hier eine JSFiddle erstellt: http://jsfiddle.net/VwjxJ/

Grundsätzlich möchte ich style="visibility: hidden;"eher verwenden, als style="display: none;"dass der Raum des verborgenen Elements beibehalten werden soll

Habe versucht show(), fadeIn()usw. zu verwenden, aber keine Arbeit (sie tun für style="display: none;")

Was mache ich falsch?

Question 2

Wenn Sie es mit versteckt haben, können visibility:hiddenSie es mit jQuery von anzeigen

$(".Deposit").css('visibility', 'visible');

Und in der Geige fehlt dir jQuery. Hier ist eine Demo: http://jsfiddle.net/9Z6nt/20/

Question 3

Laut JQuery-Dokumentation .show()"entspricht dies in etwa dem Aufruf .css('display', 'block'), mit der Ausnahme, dass die Anzeigeeigenschaft auf den ursprünglichen Wert zurückgesetzt wird." Legen Sie stattdessen den Stil explizit fest. Sie können eine CSS-Klasse verwenden

.hidden{
    visibility: hidden;
}
.shown{
    visibility: visible;
}

und set verwendet

$("#yourdiv").removeClass("hidden").addClass("shown");

Question 4

Wenn der Platz des ausgeblendeten Elements beibehalten werden soll, verwenden Sie die Deckkraft.

dh:

$('div').fadeTo(500,1) //show
$('div').fadeTo(500,0) //hide

zum Beispiel:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style='opacity:0'>
  Test opacity
</div>


<button onclick="$('div').fadeTo(500,1);">Show</button>
<button onclick="$('div').fadeTo(500,0);">Hide</button>

Erweitern Sie das Snippet

Question 5

Hey Mann, deine Geige arbeitet, wähle einfach Framework jQuery für die Geige. Wenn die Sichtbarkeit ausgeblendet ist, ändern Sie die CSS-Sichtbarkeitseigenschaft in sichtbar.

(".Deposit").css('visibility','visible');

Question 6

Auf geht's :)

$(".Deposit").show();

    $(".Deposit").fadeOut(500,function(){
        $(this).css({"display":"block","visibility":"hidden"});

    });

Question 7

$(".Deposit").show();

$(".Deposit").fadeTo(500,0);

Answer 1

79

Grundlegende jQuery-Frage:

Ich versuche, eine zu enthüllen div, die mit jQuery als versteckt markiert wurde. Aber ich verstehe es nicht ganz

Ich habe hier eine JSFiddle erstellt: http://jsfiddle.net/VwjxJ/

Grundsätzlich möchte ich style="visibility: hidden;"eher verwenden, als style="display: none;"dass der Raum des verborgenen Elements beibehalten werden soll

Habe versucht show(), fadeIn()usw. zu verwenden, aber keine Arbeit (sie tun für style="display: none;")

Was mache ich falsch?

javascript jquery html ChrisCa
quelle

6

Versuchen Sie, das Framework auf Ihrer jsfiddle in jQuery zu ändern.

Am

1

@ a'r: Das Problem bleibt weiterhin bestehen . Hier ist eine korrigierte Version: jsfiddle.net/fkling/9Z6nt/19

Felix Kling

In Ihrem Beispiel haben Sie nicht die richtige Bibliothek für Ihr Projekt eingerichtet. Im "Choose Framework" sollten Sie "jQuery" auswählen.

Mega

5

+1, um den Abstimmungen entgegenzuwirken .... Leute sollten mehr Zeit damit verbringen, das Problem zu verstehen ...

Felix Kling

5

Ich denke, das lag daran, dass andere Leute dachten, Sie hätten einfach vergessen, die richtige Bibliothek auszuwählen (und nach dem Ändern schien es zu funktionieren). Aber sie haben Ihre Frage und den Code nicht sorgfältig gelesen. Warum sonst würde der erste Kommentar 5 positive Stimmen bekommen? Ja, vielleicht war deine jsfiddle nicht korrekt, aber das ist kein Grund für imo Abstimmungen. Das Problem war auch ohne das klar (und es war leicht zu beheben).

Felix Kling

Answer 2

6

Versuchen Sie, das Framework auf Ihrer jsfiddle in jQuery zu ändern.

Am

Answer 3

1

@ a'r: Das Problem bleibt weiterhin bestehen . Hier ist eine korrigierte Version: jsfiddle.net/fkling/9Z6nt/19

Felix Kling

Answer 4

In Ihrem Beispiel haben Sie nicht die richtige Bibliothek für Ihr Projekt eingerichtet. Im "Choose Framework" sollten Sie "jQuery" auswählen.

Mega

Answer 5

5

+1, um den Abstimmungen entgegenzuwirken .... Leute sollten mehr Zeit damit verbringen, das Problem zu verstehen ...

Felix Kling

Answer 6

5

Ich denke, das lag daran, dass andere Leute dachten, Sie hätten einfach vergessen, die richtige Bibliothek auszuwählen (und nach dem Ändern schien es zu funktionieren). Aber sie haben Ihre Frage und den Code nicht sorgfältig gelesen. Warum sonst würde der erste Kommentar 5 positive Stimmen bekommen? Ja, vielleicht war deine jsfiddle nicht korrekt, aber das ist kein Grund für imo Abstimmungen. Das Problem war auch ohne das klar (und es war leicht zu beheben).

Felix Kling

Answer 7

121

Wenn Sie es mit versteckt haben, können visibility:hiddenSie es mit jQuery von anzeigen

$(".Deposit").css('visibility', 'visible');

Und in der Geige fehlt dir jQuery. Hier ist eine Demo: http://jsfiddle.net/9Z6nt/20/

Muhammad Usman
quelle

document.readyist nicht nötig. Der Code wird ausgeführt onLoad(Auswahlfeld über den Frameworks).

Felix Kling

Oh, habe das nicht bemerkt, danke. Dies ist jedoch in echtem Code hilfreich, wenn JS aufgerufen wird, bevor DOM bereit ist.

Muhammad Usman

1

@ Imray tut es. Es ist nicht für die Lösung von visibility:hidden, ich habe nur seine repariert.

Muhammad Usman

Answer 8

document.readyist nicht nötig. Der Code wird ausgeführt onLoad(Auswahlfeld über den Frameworks).

Felix Kling

Answer 9

Oh, habe das nicht bemerkt, danke. Dies ist jedoch in echtem Code hilfreich, wenn JS aufgerufen wird, bevor DOM bereit ist.

Muhammad Usman

Answer 10

1

@ Imray tut es. Es ist nicht für die Lösung von visibility:hidden, ich habe nur seine repariert.

Muhammad Usman

Answer 11

11

Laut JQuery-Dokumentation .show()"entspricht dies in etwa dem Aufruf .css('display', 'block'), mit der Ausnahme, dass die Anzeigeeigenschaft auf den ursprünglichen Wert zurückgesetzt wird." Legen Sie stattdessen den Stil explizit fest. Sie können eine CSS-Klasse verwenden

.hidden{
    visibility: hidden;
}
.shown{
    visibility: visible;
}

und set verwendet

$("#yourdiv").removeClass("hidden").addClass("shown");

Polymorphix
quelle

$("#yourdiv").toggleClass('hidden');; Keine Notwendigkeit für die "gezeigte" Klasse

Alexander Bird

1

Es ist nicht genau das gleiche. Es hängt von möglichen allgemeineren Überschreibungen in anderen Teilen des CSS ab, aber normalerweise würden Sie wahrscheinlich damit durchkommen, ja.

Polymorphix

Answer 12

$("#yourdiv").toggleClass('hidden');; Keine Notwendigkeit für die "gezeigte" Klasse

Alexander Bird

Answer 13

1

Es ist nicht genau das gleiche. Es hängt von möglichen allgemeineren Überschreibungen in anderen Teilen des CSS ab, aber normalerweise würden Sie wahrscheinlich damit durchkommen, ja.

Polymorphix

Answer 14

Wenn der Platz des ausgeblendeten Elements beibehalten werden soll, verwenden Sie die Deckkraft.

dh:

$('div').fadeTo(500,1) //show
$('div').fadeTo(500,0) //hide

zum Beispiel:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style='opacity:0'>
  Test opacity
</div>


<button onclick="$('div').fadeTo(500,1);">Show</button>
<button onclick="$('div').fadeTo(500,0);">Hide</button>

Erweitern Sie das Snippet

Answer 15

Hey Mann, deine Geige arbeitet, wähle einfach Framework jQuery für die Geige. Wenn die Sichtbarkeit ausgeblendet ist, ändern Sie die CSS-Sichtbarkeitseigenschaft in sichtbar.

(".Deposit").css('visibility','visible');

Answer 16

2

Auf geht's :)

$(".Deposit").show();

    $(".Deposit").fadeOut(500,function(){
        $(this).css({"display":"block","visibility":"hidden"});

    });

George Matiashvili
quelle

Ja, das ist das Ticket!

Kirby

Answer 17

Ja, das ist das Ticket!

Kirby

Answer 18

0

$(".Deposit").show();

$(".Deposit").fadeTo(500,0);

George Matiashvili
quelle

Jquery .show () enthüllt kein Div mit der Sichtbarkeit von versteckt

Antworten: