Home
jquery fadeIn nu funcționează (Programare, Jquery)

jquery fadeIn nu funcționează (Programare, Jquery)

aprilie 6, 2021 Programare
DS. a intrebat.

Poate cineva să-mi spună ce fac greșit:

stil:

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

markup:

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

Comentarii

  • Ce te aștepți să facă fadeIn()? Dacă .warning nu este vizibil, fadeIn îl va face vizibil, dar, conform CSS-ului tău, nu există niciun motiv pentru care să te aștepți ca acesta să fie ascuns. –  > Por Noah Watkins.
  • Scenariul meu a fost că div-ul de avertizare va apărea oricum la încărcarea paginii. Am vrut doar să îl afișez lent odată ce utilizatorul a aterizat pe pagina respectivă. Așa că nu am vrut să setez display:none în foaia de stil. Dar, așa cum a sugerat Nick mai jos .hide().fadeIn() a fost exact ceea ce aveam nevoie pentru ca acesta să funcționeze în acest scenariu. –  > Por DS..
4 răspunsuri
Nick Craver

Cu excepția cazului în care elementul este ascuns, nu se va produce niciun fade, aveți nevoie de ceva de genul acesta:

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

Puteți încerca aici, , de asemenea $() este depreciat în 1.4+, ar trebui să folosiți $(document) sau versiunea mai scurtă, ca aceasta:

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

Alternativa este de a da elementului un display: none inițial dar acest lucru nu este valabil pentru utilizatorii cu deficiențe JS sau dacă apar erori JavaScript care împiedică estomparea, așa că ar fi bine să evitați această abordare.

Comentarii

  • Vă mulțumim! Am încercat elm.css('opacity', '0').fadeIn() și elm.css('opacity', '0').hide().fadeIn() care nu afișează nimic. Cea de-a doua eșuează deoarece hide stochează valoarea originală a opacității, deci se estompa la 0. –  > Por Jonathan Lidbeck.
Ahmed Aman

adăugați display:none la codul css.

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

Comentarii

  • Vă mulțumim pentru răspuns! Evit această soluție din cauza capcanelor semnalate în răspunsul de mai sus. –  > Por DS..
Mark Schultheiss

Aș tinde să cred că doriți ca unele evenimente să fie gestionate pentru fadin. vedeți exemplul de lucru aici: http://jsfiddle.net/hPHPn/

Astfel:

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

pentru un marcaj simplu:

<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" />

user1880276

Am făcut recent același lucru în aplicația mea. În partea de sus a aplicației mele html document am:

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

Partea în care scrie src="advtemp3jquery.js se referă la documentul meu extern .js extern. Mi se pare mai ordonat să păstrez codul într-un fișier extern.

Scriptul face următoarele:

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

Tags:

Related Posts