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
});
- 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..
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.
- Vă mulțumim! Am încercat
elm.css('opacity', '0').fadeIn()
șielm.css('opacity', '0').hide().fadeIn()
care nu afișează nimic. Cea de-a doua eșuează deoarecehide
stochează valoarea originală a opacității, deci se estompa la 0. – > .
adăugați display:none
la codul css.
.warning{border: 1px solid #F0AAAA; background:#FFBABA; color: #C90000;display:none}
- Vă mulțumim pentru răspuns! Evit această soluție din cauza capcanelor semnalate în răspunsul de mai sus. – > .
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" />
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');
});