[jQuery] lehet, valahogy a css függvényt késleltetni?
Nos csináltam egy kis memória játékot, ami fadeOut()/fadeIn(), hide()/show() -al tökéletesen működött, mivel a delay(500) függvénynek köszönhetően várt 0,5 másodpercet mielőtt megjelenítette a kártyalapokat.
Nos én átírtam CSS3 segítségével olyanra, hogy felforgassa a lapokat, ne csak előfadeljenek. Viszont ebben az esetben nem várja ki a második lap felfordítását, egyből visszafordítja őket, mielőtt még a felhasználó megnézhetné, melyik volt a másik lap, mivel a delay függvény nem működik.
pl.:
Itt működik:
$(#valami).delay(500).hide();
Viszont itt már nem:
$(#valami).delay(500).css({'parancs1':'ertek1','parancs2':'ertek2'}); //Mintha a delay ott sem lenne.
Ez az egész nagyon prímán nézne ki, ha valaki tudna nekem mondani egy megoldást a css() függvény által #valamire ráaggatott parancsok késleltetésére.
A kód kicsit hosszú..
A válaszokat előre is köszi(:
válasza:működget (nekem)
$('img#cover').click(function(){
if(click_db==2) return ;
++click_db;
$(this).next().addClass('selected'+selectcounter);
$(this).addClass('select'+selectcounter);
picture.push($(this).next().attr('number'));
//$(this).hide();
$(this).css({'z-index':'0','transform':'rotateY(180deg)','-webkit-transform':'rotateY(180deg)','-moz-transform':'rotateY(180deg)','-o-transform':'rotateY(180deg)','-ms-transform':'rotateY(180deg)'});
if(click_db==2){
$(this).next().css({'transform':'rotateY(0deg)','-webkit-transform':'rotateY(0deg)','-moz-transform':'rotateY(0deg)','-o-transform':'rotateY(0deg)','-ms-transform':'rotateY(0deg)'}).bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
if(picture[0]==picture[1]){
$('.selected'+selectcounter).delay(500).fadeOut();
for(var i=0;i<=picture.length;++i){
picture.pop();
}
click_db=0;
selectcounter++;
}else{
//$('.select'+selectcounter).delay(500).fadeIn();
setTimeout(function(){
$('.select'+selectcounter).css({'z-index':'2','transform':'rotateY(0deg)','-webkit-transform':'rotateY(0deg)','-moz-transform':'rotateY(0deg)','-o-transform':'rotateY(0deg)','-ms-transform':'rotateY(0deg)'});
$('.selected'+selectcounter).css({'transform':'rotateY(180deg)','-webkit-transform':'rotateY(180deg)','-moz-transform':'rotateY(180deg)','-o-transform':'rotateY(180deg)','-ms-transform':'rotateY(180deg)'});
for(var i=0;i<=picture.length;++i){
picture.pop();
}
click_db=0;
selectcounter++;
},500);
}
$(this).next().unbind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd");
});
}else{
$(this).next().css({'transform':'rotateY(0deg)','-webkit-transform':'rotateY(0deg)','-moz-transform':'rotateY(0deg)','-o-transform':'rotateY(0deg)','-ms-transform':'rotateY(0deg)'});
}
});
});
Ne felejtsd el le is szedni a class-t, mert egyre csak gyűlik ahogy fordítok :) (ezért fordul vissza mikor nem kéne)
válasza: válasza:$('img').click(function(){
if(click_db==2) return ;
++click_db;
$(this).next().addClass('selected'+selectcounter);
$(this).addClass('select'+selectcounter);
picture.push($(this).next().attr('number'));
//$(this).hide();
$(this).css({'z-index':'0','transform':'rotateY(180deg)','-webkit-transform':'rotateY(180deg)','-moz-transform':'rotateY(180deg)','-o-transform':'rotateY(180deg)','-ms-transform':'rotateY(180deg)'});
if(click_db==2){
$(this).next().css({'transform':'rotateY(0deg)','-webkit-transform':'rotateY(0deg)','-moz-transform':'rotateY(0deg)','-o-transform':'rotateY(0deg)','-ms-transform':'rotateY(0deg)'}).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
$('img').off("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd");
if(picture.length > 0 && picture[0]==picture[1]){
$('.selected'+selectcounter).delay(500).fadeOut();
picture = [];
click_db=0;
selectcounter++;
$('img').removeClass();
}else{
//$('.select'+selectcounter).delay(500).fadeIn();
setTimeout(function(){
$('.selected'+selectcounter).css({'z-index':'0','transform':'rotateY(180deg)','-webkit-transform':'rotateY(180deg)','-moz-transform':'rotateY(180deg)','-o-transform':'rotateY(180deg)','-ms-transform':'rotateY(180deg)'});
$('.select'+selectcounter).css({'transform':'rotateY(0deg)','-webkit-transform':'rotateY(0deg)','-moz-transform':'rotateY(0deg)','-o-transform':'rotateY(0deg)','-ms-transform':'rotateY(0deg)'});
picture = [];
click_db=0;
selectcounter++;
$('img').removeClass();
},500);
}
});
}else{
$(this).next().css({'transform':'rotateY(0deg)','-webkit-transform':'rotateY(0deg)','-moz-transform':'rotateY(0deg)','-o-transform':'rotateY(0deg)','-ms-transform':'rotateY(0deg)'});
}
});
});
kész! (szerintem működik) tanulmányozhatod :)
válasza:Oh szinte már remek(:
Még olyan kérdésem lehet, hogy akkor tulajdonképpen ez mi célt szolgál-> transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd az off() meg az on() belsejében?
válasza:A másodszorra felfordított képeknél figyeltetjük az eseményt(átmenet vége/transition end), az eseményhez pedig hozzárendelünk egy függvényt.
Az elforgatás -ezek szerint :D - egy átmenet.
Tehát a képhez hozzáadod a css-t és hogy az átmenet(forgatás) végén hajtsa végre a megadott fg-t.
Mivel css-t adsz hozzá, ezért nem lehet jquery fg-ekkel figyeltetni.(Bár lehet hogy csak tovább kell keresni, ..én ezt találtam)
Az off azért kell, hogy ne figyeljünk tovább az eseményre, mivel abban az esetben csak egyszer kellett végrehajtani a dolgokat.
Azért kell ez a sok szó (transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd), hogy ~minden böngésző megértse. Ez a böngésző verziójától is függ.
Kapcsolódó kérdések:
Minden jog fenntartva © 2025, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!