Wie um zu zeigen, ein div-das ist verborgen durch css auf den button klicken

Ich bin ziemlich neu bei Jquery und ich möchte einen versteckten div css: display:none und sobald ein button geklickt wurde, die $(..).slideDown ausgeführt wird, und das div zeigt seine conents. Ich versuchen würde diese.

<style> .hidden-div{ display:none } </style>

<div class="hidden-div"> You can't see me </div>

<button onclick="show-div()"> Show Above Div </button>


<script>

    function show-div(){

        $('.hidden-div').slideDown('fast');
        //more stuff...
    }
</script>

Diese nicht wirklich schieben Sie es nach unten genau, wie es überschneidet sich alles andere ? Auch ich versuchen würde, nur die Einstellung der class="hidden-div" zu class="display-div" aber dann die slideDown-animation nicht ausgeführt werden kann.

Nun könnte ich sagen $('hidden-div').hide() nur nach dem div-Element und entfernen Sie die css-insgesamt aber schafft es das problem wo ich sehe das div-Element und dann wird es versteckt, es ist nur 0,5 sec, was am Anfang der Seite geladen, aber seine schlecht Aussehen.

Also wer weiß eine Lösung?

Eine Lösung gefunden, um mein eigenes problem..

//rehide the div, not sure why, but it works.
$('.hidden-div').hide(); 


//change class so it no longer display:none 
//but it will not show the div as .hide() was execute above.
$('.hidden-div').attr('class','showing-div'); 


//Slide it down and everything works.
$('.hidden-div').slideDown('fast');



//this can be done in 1 liner. (thank you, Mohsen for chaining explanation)
$('.hidden-div').hide().attr('class','showing-div').slideDown('fast');

Hoffe, dies ist hilfreich für jemanden.

  • Markdown ist nicht BBcode.
  • Stackoverflow hat eine Funktion, um Ihre eigene Frage zu beantworten.
InformationsquelleAutor Kivylius | 2011-09-26
  1. 1

    es ist besser, verwenden Sie ein standard-javascript, und zeigen Sie, dass div mit der id

    <style> .hidden-div{ display:none } </style>

<div class="hidden-div" id="hidden-div"> You can't see me </div>

<button onclick="getElementById('hidden-div').style.display = 'block'"> Show Above Div </button>
    • Das ist ok, aber ich will die animation mit JQuery.slideDown();
    InformationsquelleAutor Mohamed Atef
  2. 0
    $('.hidden-div').show('fast');

    Versuchen Sie es mit < und > statt [ und ], und formatieren Sie alles richtig?

    • Nicht sicher, ob Sie auch Lesen meine Frage, Nein .Karte wird nicht funktionieren.
    InformationsquelleAutor adeneo
  3. 0

    In Ihrem javascript-entfernen Sie zunächst die Klasse "hidden-div" Verwendung von jQuery-Funktion removeClass().
    Sehen, ob das hilft...

    • Wenn ich entfernen die Klasse der div wird sich zeigen, aber die animation der .slideDown() ist verloren, da der div ausgesetzt ist.
    InformationsquelleAutor Jaizen
  4. 0
    1. binden von events mit jQuery, nicht mit inline-JavaScript-Methode
    2. jQuery SlideDown Methode ist nicht für das entfernen eines Elements. Sie können ausblenden oder ausblenden
    3. BTW, wenn Sie wollen, um eine slide-down-Effekt und dann versteckt das element können Sie die Kette zwei Methoden.
    4. Um zu verhindern, dass overlaping müssen Sie die Verwendung von CSS. Sie können position:absolute oder eine bestimmte height element parent.

    Haben beide nach unten schieben und fade-Effekte und auch verbindlich Falle der Verwendung von nicht-inline-code können Sie diesen code verwenden:

    $('button').bind('click', function(){
$('.hidden-div').slideDown(500).fadeOut(1000); //500ms slide down and 1s fade out
})

    Entfernen, die disply:none von der hidden-div Klasse zu.

    • show-div ist nicht die einzige Funktion, die ich auch haben Last-div ein und ausblenden-div-Funktion, so dass ich nicht verwenden können, binden Ereignis, wie es nicht funktioniert. Auch über die Verkettung der Effekte versuchen würde $('.hidden-div').attr('class','show-div').slideDown('fast'); aber die animation ist immer noch verloren.
    InformationsquelleAutor Mohsen
Schreibe einen Kommentar