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

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