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

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

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

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

7

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

— MJ Vakili
quelle

3

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');

— Sushil Bharwani
quelle

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

0

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

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

— George Matiashvili
quelle