| Autor | Zpráva | ||
|---|---|---|---|
| xROAL Profil |
#1 · Zasláno: 3. 5. 2013, 17:21:12
Zdravím, písal som tento problém už aj na oficiálne jQuery fórum, ale tam mi akosi nikto nebol schopný zatiaľ poradiť, tak to skúšam aj tu. Fakt nechápem, čo robím zle a prečo sa deje to čo sa deje - ide o to že chcem aby sa po kliknutí na zmenšenú fotku načítala pôvodná fotka a zobrazila sa vo fixed DIVe. To by fungovalo, problém nastane až keď chcem zase po kliknutí na tento div túto fotku nechať zmiznúť.
Na to by som chcel využiť .fadeOut() z jQuery, to však nespraví vôbec nič, avšak .hide() tento DIV skryje... prečo? Pripájam kódy: Div pre fotografiu: (+link na zatvorenie divu) <a href="javascript:void(0)" onclick="hideImage()"> <div id="fullImage"></div> </a> #fullImage {
position: fixed;
right: 0;
top: 0;
z-index: 20;
width: 100%;
height: 100%;
display: none;
background: rgba(0, 0, 0, 0.5);
text-align: center;
}Funkcia pre zobrazenie fotky: function showImage(link){
$("#fullImage").fadeIn();
$("#fullImage").empty().append('<img src="img/loading.gif" />').delay(1000, function(){
var image = new Image();
image.src = link;
image.onload = function(){
$("#fullImage").empty().append(image);
}
});
}Skrytie fotky: function hideImage(){
$("#fullImage").fadeOut();
} pokiaľ namiesto fadeOut() použijem hide() tak to DIV síce skryje, no následne už ho nezobrazí... :/ Neviem či som slepý, osprostený už, ale nejde mi do hlavy prečo sa to deje... |
||
| Kcko Profil |
#2 · Zasláno: 3. 5. 2013, 19:31:43
xROAL:
Živou ukázku prosím |
||
| xROAL Profil |
#3 · Zasláno: 4. 5. 2013, 22:40:39
Ukážka je tu: http://emery.sk/problem/index.php
Mne osobne to nevyhodí ani chybu ani nič, pokiaľ .fadeOut() zmením na .hide(), tak DIV zmizne, ale už sa nedá znova otvoriť... |
||
| Chamurappi Profil |
#4 · Zasláno: 5. 5. 2013, 03:42:00
Reaguji na xROALa:
V uvedené ukázce do showImage nepředáváš žádný argument, link je undefined, obrázek se nikdy nenačte. Ale problém vidět je.
Proč nepoužíváš normální setTimeout?
Když koukám na zdroják funkce delay:
delay: function( time, type ) {
time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
type = type || "fx";
return this.queue( type, function( next, hooks ) {
var timeout = setTimeout( next, time );
hooks.stop = function() {
clearTimeout( timeout );
};
});
},type) dáváš funkci, což nadělá docela vtipnou paseku, protože funkce queue z nějakého důvodu počítá s tím, že do ní jako první argument přijde i něco jiného než řetězec, v takovém případě to dotyčné něco pokládá za frontovou callback funkci a zcela zahazuje druhý argument (což u delaye je skutečná frontová callback funkce):
queue: function( type, data ) {
var setter = 2;
if ( typeof type !== "string" ) {
data = type;
type = "fx";
setter--;
}
if ( arguments.length < setter ) {
return jQuery.queue( this[0], type );
}
return data === undefined ?
this :
this.each(function() {
var queue = jQuery.queue( this, type, data );
// ensure a hooks for this queue
jQuery._queueHooks( this, type );
if ( type === "fx" && queue[0] !== "inprogress" ) {
jQuery.dequeue( this, type );
}
});
},dequeue. To ta tvoje funkce předaná do delaye nedělá, takže se fronta zasekne a už se nikdy žádná animace neodehraje. Proto fadeOut (což je jen zkratka pro animate({opacity: "hide"})) nic nedělá, zatímco na frontách nezávislý neanimovaný hide měnící jednorázově display funguje.
Krásný problém. Autoři jQuery by mu mohli předejít, kdyby kontrolovali vstupy. Můžeš jim to napsat pod svůj dotaz. |
||
| xROAL Profil |
#5 · Zasláno: 5. 5. 2013, 19:56:39
Chamurappi:
Veľmi pekne ďakujem! Krásne vysvetlenie toho čo sa vlastne za tým všetkým deje :) |
||
| joe Profil |
#6 · Zasláno: 5. 5. 2013, 20:45:23 · Upravil/a: joe
xROAL:
Přes to, že ti to Chamurappi hezky vysvětlil, co se v tom děje, vidím spíš problém v používání funkce delay. Slouží ke zpoždění spuštění položek, co jsou ve frontě, typicky animací. V dokumentaci se nepíše, že druhým argumentem může být funkce. Moc jsem nepochopil ten tvůj kód, proč chceš čekat jednu vteřinu a pak obrázek zobrazit, v té době stejně ještě nevíš, jestli je obrázek načtený nebo ne. Já bych tu tvou funkci showImage přepsal takto:
function showImage (link) {
$("#fullImage").fadeIn();
$("#fullImage").empty().append('<img src="img/loading.gif" />');
var image = new Image();
image.src = link;
image.onload = function(){
$("#fullImage").empty().append(image);
}
}Možná jsi tam chtěl ten loader nechat 1 vteřinu, aby byl vůbec vidět. V tom případě bych pak na teprve na ten loader volal funkci (v lepším případě funkci setTimeout) delay a po fadeOut v callbacku ten obrázek zobrazil.
var loader = $('<img src="img/loading.gif" />');
...
$("#fullImage").empty().append(loader);
...
image.onload = function() {
loader.delay(1000).fadeOut(function () {
$("#fullImage").empty().append(image);
});
} |
||
|
Časová prodleva: 11 let
|
|||
0