jquery fadeIn werkt niet

Kan iemand me alsjeblieft vertellen wat ik verkeerd doe:

stijl:

.warning{border: 1px solid #F0AAAA; background:#FFBABA; color: #C90000;}

opmaak:

<p class="warning">A successful authorization already exists. 
                    Further authorizations are not allowed at this time.</p>

script:

$().ready(function () {
     alert($(".warning").html());     // WORKS
     $(".warning").fadeIn(4000);      // DOESN'T WORK
 });

Antwoord 1, autoriteit 100%

Tenzij het element verborgen is, zal er geen vervaging optreden, je hebt zoiets als dit nodig:

$(".warning").hide().fadeIn(4000);

Je kunt het hier proberen, ook $()is verouderd in 1.4+, moet u $(document)of de kortere versie gebruiken, zoals deze:

$(function() {
  $(".warning").hide().fadeIn(4000);
});

Het alternatief is om het element een display: nonein eerste instantie maardit breekt voor JS-gehandicapte gebruikers, of als er JavaScript-fouten optreden die de vervaging verhinderen, dus u kunt deze benadering willen vermijden.

Antwoord 2, autoriteit 10%

voeg display:nonetoe aan je css-code.

.warning{border: 1px solid #F0AAAA; background:#FFBABA; color: #C90000;display:none}

Antwoord 3

Ik zou geneigd zijn te denken dat je wilt dat een evenement voor de mode wordt beheerd. zie hier een werkvoorbeeld: http://jsfiddle.net/hPHPn/

Dus:

$(document).ready(function(){
    $(".warning").hide();// hide it initially
    $('#unhideit').click(function(){
        $(".warning").fadeIn(4000);                            });
});

voor wat eenvoudige opmaak:

<p class="warning">A successful authorization already exists  
    for this Quote ID. Further authorizations are not allowed at this time.</p> 
<input type="button" id="unhideit" value="clickme" />

Antwoord 4

Ik heb onlangs hetzelfde gedaan in mijn aanvraag. Bovenaan mijn htmldocument heb ik:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="advtemp3jquery.js"></script>

Het gedeelte met de tekst src="advtemp3jquery.jsverwijst naar mijn externe .js-bestand. Ik vind het netter om de code in een extern bestand te bewaren.

p>

Het script doet het volgende:

$(document).ready(function() {
    $('.header1,.header2').fadeIn('4000');
});