Jquery .show () nie ujawnia elementu div z widocznością ukrytego

81

Podstawowe pytanie jQuery:

Próbuję ujawnić div , który został oznaczony jako ukryty za pomocą jQuery. Ale nie do końca rozumiem

Utworzyłem tutaj JSFiddle: http://jsfiddle.net/VwjxJ/

Zasadniczo chcę użyć style="visibility: hidden;"zamiaststyle="display: none;" tak, jak chcę, aby zachować przestrzeń ukrytego elementu

Próbowałem, używając show(), fadeIn()etc, ale nie praca (robią dlastyle="display: none;" )

Co ja robię źle?

javascript jquery html ChrisCa
źródło
6
Spróbuj zmienić framework na swoim jsfiddle na jQuery.
a'r
1
@ a'r: Problem nadal występuje . Oto poprawiona wersja: jsfiddle.net/fkling/9Z6nt/19
Felix Kling
W swoim przykładzie nie skonfigurowałeś odpowiedniej biblioteki dla swojego projektu, w "Wybierz framework" powinieneś wybrać "jQuery".
megas
5
+1, aby przeciwdziałać głosom przeciw .... ludzie powinni spędzać więcej czasu próbując zrozumieć problem ...
Felix Kling
5
Myślę, że to dlatego, że inni ludzie myśleli, że po prostu zapomniałeś wybrać odpowiednią bibliotekę (a po jej zmianie wydawało się, że działa). Ale nie przeczytali uważnie twojego pytania i kodu. Z jakiego innego powodu pierwszy komentarz otrzymałby 5 głosów za? Tak, może twój jsfiddle nie był poprawny, ale to nie jest powód do negatywnych głosów imo. Problem był jasny nawet bez tego (i był łatwy do naprawienia).
Felix Kling

Odpowiedzi:

123

Jeśli ukryłeś to za pomocą visibility:hidden, możesz to pokazać za pomocą jQuery przez

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

A na skrzypcach brakuje jQuery. Oto demo: http://jsfiddle.net/9Z6nt/20/

Muhammad Usman
źródło
document.readyto nie jest konieczne. Kod jest uruchamiany onLoad(selectbox nad frameworkami).
Felix Kling
Och, nie zauważyłem tego, dzięki. Ale będzie pomocny w prawdziwym kodzie, jeśli JS zostanie wywołany zanim DOM będzie gotowy.
Muhammad Usman
1
@Imray To robi. To nie jest rozwiązanie visibility:hidden, naprawiłem tylko jego.
Muhammad Usman
11

Według dokumentacji JQuery .show()„jest mniej więcej równoważne z wywołaniem .css('display', 'block'), z tym wyjątkiem, że właściwość display jest przywracana do stanu, w jakim była początkowo”. Zamiast tego ustaw styl jawnie. Możesz użyć klasy CSS

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

i zestaw używa 

$("#yourdiv").removeClass("hidden").addClass("shown");
Polimorphix
źródło
$("#yourdiv").toggleClass('hidden'); nie ma potrzeby udziału w "pokazanej" klasie
Alexander Bird
1
To nie jest dokładnie to samo. Zależy to od możliwych bardziej ogólnych nadpisań w innych częściach CSS, ale zwykle prawdopodobnie uszłoby to na sucho, tak.
Polymorphix
7

Jeśli chcesz zachować przestrzeń ukrytego elementu, użyj krycia.

to znaczy:

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

na przykład: 

<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>
Rozwiń fragment

MJ Vakili
źródło
3

Hej człowieku, twoje skrzypce pracują, po prostu wybierz framework jQuery na skrzypcach. Jeśli jego widoczność jest ukryta, zmień właściwość widoczności css na widoczną.

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

sushil bharwani
źródło
2

No to ruszamy :)

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

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

    });
George Matiashvili
źródło
tak, to jest bilet!
Kirby
0 
$(".Deposit").show();

$(".Deposit").fadeTo(500,0);
George Matiashvili
źródło