Autor Zpráva
bestik_63
Profil
ahoj měl bych dotázeček,

snažím se v jquery vytvořit animaci vysunutí a zasunutí divu. Prostě Div má výšku 0 a po najetí na odkaz mu zadám pomocí funkce animate např. výšku 500px a obráceně.

var Kalkulator = function (id){
    this.hold = 0;
    this.open = 0;    
}
Kalkulator.prototype.show = function(){
    this.hold = 1;    //uzamčení kalkulátoru aby se nemohl skrýt během otevírání
    $("#cenik_konfigurator").animate({ "height": "400px"  }, 500, function() {
        kalkulator.hold = 0;    //po skončení animace se kalkulator odemkne pro další animaci
        kalkulator.open = 1;    //info že je kalkulátor otevřený
    });
        
}
//skrytí kalkulátoru
Kalkulator.prototype.hide = function(){
    this.hold = 1;    //uzamčení kalkulátoru aby se nemohl zobrazit během skrývání
    $("#cenik_konfigurator").animate({ "height": "0px"  }, 500, function() {
        kalkulator.hold = 0;    //po skončení animace se kalkulator odemkne pro další animaci
        kalkulator.open = 0;    //info že je kalkulátor skrytý
    });    
}
kalkulator = new Kalkulator();
$("#konfigurator").click(function(){        
    if((kalkulator.open == 0)&&(kalkulator.hold != 1))    //zobrazení kalkulátoru        
        kalkulator.show();
    if((kalkulator.open == 1)&&(kalkulator.hold != 1))    //skrytí kalkulátoru
        kalkulator.hide();    
})

Problém je pokud na tlačítko kliknu dříve než uplyne 500ms, nebo na něj kliknu vícekrát za sebou. Vypadá to pak jako by byly požadavky ve frontě a několikrát se to zobrazí a zmizí. Chtěl jsem toto eliminovat a tak jsem vytvořil u "objektu" proměnnou hold. Pokud je tato proměnná 0, tak je možné animaci zapnout. Pokud je 1 tak nikoli. Tím zabezpečím že po dobu animace se po stisku tlačítka nic nestane. Na začátku animace tedy hold přehodím do 1 a na konci zpátky do 0. Problém je jak ji přehodit zpátky do 0.
Vše se točí u funkce :
   animate({ "height": "500px"  }, 500, function() {
     //zde je možné spustit kód, který se provede po dokončení animace
   })
Nevím totiž jak korektně změnit this.hold na 0 uvnitř této funkce.
Funguje to tak že použiju
animate({ "height": "500px"  }, 500, function() {
     kalkulator.hold
})
To ale musím znát jméno konstruktoru, takže se dá vlastně říci že ve funkci přepíšu obsah proměnné objektu. To je jako bych si založil funkci a přepisoval v ní proměnné, které jsou založené vně funkce. Nicméně by to spíš mělo fungovat tak, že funkce by měla vracet hodnotu, kterou uložím do proměnné hold. Mělo by to být něco jako
animate({ "height": "500px"  }, 500, this.hold = function() {
       return 0
})
jenže to samozřejmě nefunguje.

Je to možná trochu banalita, řešení funguje. Jenže mě se to nelíbí. Z pohledu programátora by to mělo fungovat, tak že použiju programovací techniku, která je k tomu určená. A tím že jsem to obešel pomocí přepsání proměnné založené mimo funkci je špatný přístup. Neměl by někdo nápad jak to udělat správně, tzn. uvnitř funkce změnit hodnoty, které jsou založené vně funkce tzn. asi použít fukci která má návratovou hodnotu, kterou uložím do proměnné this.hold.
juriad
Profil
bestik_63:
A proč tu frontu třeba napřed nesmažeš? api.jquery.com/stop
Pak žádnou proměnnou hold nepotrebuješ. Také pro účely zlepšení animace je lepší nastavit open při začátku: pak dva kliky po sobě budou fungovat pěkněji.
Živá ukázka

Nebo ještě lépe takto:
Živá ukázka

Toto správně měří výšku kalkulačky, takže nemusíš mít zadrátovaných 400px. (Ono by se šlo zbavit i toho atributu open.)
bestik_63
Profil
juriad:
o této funkci jsem nevěděl. Nicméně je to ještě lepší řešení než jsem původně chtěl.
Díky moc. Toto řešení je opravdu elegantní. :-)

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:

Prosím používejte diakritiku a interpunkci.

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