Autor Zpráva
xROAL
Profil
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>
CSS:
#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
xROAL:
Živou ukázku prosím
xROAL
Profil
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
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 );
            };
        });
    },
… nevidím, že by měla nějaký callback. Jen přidává do fronty animací zpoždění. Ty jí jako název fronty (parametr 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 );
                }
            });
    },
Systém front v jQuery očividně funguje tak, že funkce zanořená do fronty musí buď sama vyvolat další funkci, kterou dostane v argumentu, nebo oznámit zpátky frameworku, že je hotovo, zavoláním 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
Chamurappi:
Veľmi pekne ďakujem! Krásne vysvetlenie toho čo sa vlastne za tým všetkým deje :)
joe
Profil
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);
      });
  }  

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: