[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(:
Én szívesen bemásolom a kódom ide, vagy feldobom valami free helyre, de elég sok kritika illethet pár dolgot hatékonyság szempontjából, mert be kell látni azért én még csak próbálkozom a dolgokkal(:
Igazából én bármilyen építő kritikát elfogadok, de úgy álltam neki, hogy ha valami nem megy így, megcsinálom úgy, ahogy nem hatékony.
Szerintem bemásolom, ide azt legfeljebb, ha kell feltöltöm uw-re.
(Igazából nagyon unatkoztam suliba info órán, azért álltam neki és mivel ott nem kaphatok mysql hozzáférést, így nincs benne phpD:)
html:
<html>
<head>
<title>Memo</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="container">
<div id="main_game_container">
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
-----------
css:
*{
margin: 0px;
padding: 0px;
}
body{
background-color: #777;
}
div#container{
width: 600px;
height: auto;
margin: 0px auto;
}
div#main_game_container{
width: 600px;
height: 600px;
background-color: #323232;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-o-user-select:none;
-ms-user-select: none;
position: relative;
perspective: 600;
-webkit-perspective: 1000;
-moz-perspective: 600;
-o-perspective: 600;
-ms-perspective: 600;
}
div.game_card{
width: 100px;
height: 100px;
float: left;
z-index: -1;
}
div.game_card img{
width: 100px;
height: 100px;
position: absolute;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
div.game_card img:last-child{
z-index: 1;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
img#cover{
z-index: 2;
}
div#clear{
clear:both;
}
----------
js:
function box_vertical_aligner(element){
var window_height = $(document).height();
var box_height = element.height();
element.css('margin-top',window_height/2-box_height/2+'px');
}
function feltolt(tomb){
var x;
for(var i=0;i<6;++i){
for(var j=0;j<6;++j){
do{
x = Math.floor(Math.random()*18)+1;
}while(!benne_ketszer(tomb,x));
tomb[i].push(x);
}
}
}
function benne_ketszer(tomb,x){
var count=0;
for(var i=0;i<tomb.length;++i){
for(var j=0;j<tomb[i].length;++j){
if(tomb[i][j]==x){
++count;
}
}
}
return count<2;
}
$(document).ready(function(){
box_vertical_aligner($('#main_game_container'));
var tomb = new Array(
new Array(),
new Array(),
new Array(),
new Array(),
new Array(),
new Array()
);
feltolt(tomb);
for(var i=0;i<6;++i){
for(var j=0;j<6;++j){
$('#main_game_container').append('<div class="game_card"><img src="image/cover.jpeg" alt="c-" id="cover" /><img src="image/'+tomb[i][j]+'.jpeg" alt="-" number="'+tomb[i][j]+'" /></div>');
}
}
$('#main_game_container').append('<div id="#clear"></div>');
var click_db=0;
var picture = new Array();
var selectcounter=0;
$('img#cover').click(function(){
++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)'});
$(this).next().css({'transform':'rotateY(0deg)','-webkit-transform':'rotateY(0deg)','-moz-transform':'rotateY(0deg)','-o-transform':'rotateY(0deg)','-ms-transform':'rotateY(0deg)'});
if(click_db==2){
if(picture[0]==picture[1]){
$('.selected'+selectcounter).delay(500).fadeOut();
}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)'});
},500);
}
for(var i=0;i<=picture.length;++i){
picture.pop();
}
click_db=0;
++selectcounter;
}
});
});
A hiba a script.js végén az ismert kódrészben keresendő(: (Ha még nem vagyok teljesen hülyeD:)
Am köszönöm az eddigi válaszokat is és hogy az időtökből rám szántatok(:
válasza:a scripted legvégén a ++selectcontainer; nem jó helyen van.
beállítod, hogy fél sec múlva váltsa vissza a kiválasztott képeket (ezt tetted el a selectcontainerbe)
de közbe a kód értelmezését, végrehajtását folytatja, és idő előtt növeled ennek az értékét
vagy valami ilyesmi :D a lényeg hogy azután növeld ezt, miután visszafordultak azok a kártyák (pl tedd bele a timeoutba)
Csak addig nehogy fordítson még :)
Hiába teszem bele; a hiba ugyanúgy fent áll.
Sőt, ahogy mondtad még jön a bug is, hogy mikor túl gyorsan kattintgat a felhasználó, a cuccok rossz class-t kapnak.
válasza:...
... 180deg)','-webkit-transform':'rotateY(180deg)','-moz-transfor
m':'rotateY(180deg)','-o-transform':'rotateY(180deg)','-ms-tr
ansform':'rotateY(180deg)'});
++selectcounter;
},500);
nekem ez így működik, másodikat felfordítom, és vár egy pillanatot, és mind2 visszafordul
válasza:ja már felfogtam :D tényleg nem tökéletes, nem várja meg míg felfordul hogy utána forduljon vissza.
ezt találtam, működik:
.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });
Rátettem erre: $(this).next().css({ ...}) .bind...
de ezt még optimalizálni kéne, mert így elég sokszor végrehajtja a függvényt (ami nem látszik, mert csak akkor csinál valamit, ha a click_db=2)
#16 ez a bindes dolog valóban működik, de nem értem :/
Szal nem tudom hogy ezt hogy kéne optimalizálnom:S
válasza:tedd bele az egyezéshez is a selectcounter++;-t, úgy nem fordulnak azok vissza
legegyszerűbb az lenne, ha nem engednéd addígfordítani, amíg nem fordultak vissza. Csinálsz egy bool változót, alapból true, ha kettőt felfordít false, és az if-else ágaiban (ahol a selectcounter++; van) ott visszaállítod true-ra.
Csak akkor csinálsz valamit, ha a változó igaz
Milyen problémák jöttek elő? Én úgy láttam kezdenek eltűnni, de lehet megint nem figyelek eléggé :D
Áh nem, tévedtem:S ez a bindes nem működik:S
csak bent maradt az else ágban a ++selectcounter
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!