| 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
})Funguje to tak že použiju animate({ "height": "500px" }, 500, function() {
kalkulator.hold
})animate({ "height": "500px" }, 500, this.hold = function() {
return 0
})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 |
#3 · Zasláno: 8. 11. 2016, 22:33:55
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í. :-) |
||
|
Časová prodleva: 7 let
|
|||
0