Fade In

[War_Hero]

Hi all. I'm creating an AJAX card game (higher/lower). I've got the game itself sorted, sort of, but am more focused on the appearance of it at the moment. I'd like the next image to fade in rather than just appear.

I've done some research and by what I've seen, I can use the JQUERY method fadeIn()...is this correct?

I'm newish to Javascript and AJAX, and am absolutely useless when it comes to effects like these. How would I go about fading in the response text the AJAX produces?

Any help will be highly appreciated. Much thanks. :)

PS: if you need to see any code, etc...please say so and I'll post it up.

[Dominion]

not sure you should use jquery here but i will answer what you asked (i just don't like jquery)

yes fadeIn( [ duration ], [ callback ] ) is a function look here http://api.jquery.com/fadeIn/ however for a hilow game make sure you hide the image first before showing a new one since it does not always give the effect you want it to http://api.jquery.com/hide/ (ok does not always give the effect i want it to could work for you but just so you know :) ) i am assuming here that the point is not having to refresh the page ? btw examples are on the site i linked to so no real need to post it up if you need more help we may need to see what your trying to fade

[War_Hero]

As I'm sorta new to AJAX, I probably haven't done it in the most efficient way. :) haha

At the moment (and just so you know, I haven't included many rules just yet. I wanted to get the AJAX working first. :)) the first card is shown with buttons that say Lower and Higher. When one of them is clicked, the AJAX 'kicks' in, and another card is randomly selected from my table of cards. Obviously the one that was just shown cannot be chosen.

I then determine whether the drawn card is higher or lower than the previous and check which option they chose. The drawn card is displayed with the result. It is this part I'd like to fade in...when the new card and the result is shown. Just to add a nice little effect.

I shall take your advice into consideration and not use jquery. I've not used it before (do you have to 'install' it before using it! lol).

But yes, I would like the user to not have to refresh the page...and I seem to have that working as well, just to need to apply rules and checks. haha

[Dominion]

don't get me wrong jquery is a good idea for something like this but i just don't like it nor do i seem to get along with it if it works for you it works. you may also want the http://api.jquery.com/fadeout/ when they click "start again" or fadeout when the upside down card (that i would assume is were the random card going to be shown) and no nothing needs to be installed it can be called via an outside source from here i think ?

http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

you could also download it and include the file i assume

[War_Hero]

OK, I'll take that into account. :)

I've never used jquery before, so it'll be a case of trial and error really...until I get it right. That's gonna be fun! haha

Thank you for the advice...it's made me rethink how I'm going to present the game. I can see this is going to take me a while, with familiarising myself with it all.

Ohh, I see. That's handy. Thank you! :D

[Haunted Dawg]

You could simply purchase:

[mp]205[/mp]

And modify the JQuery to fadeIn instead of just Showing.

The script is already fully working, just got to change ); to ).fadeIn(1200); and BAM :)

[Dominion]

not being funny here but in the long term its better to learn then buy only pay for something if you could already do it yourself that and he never said it was mccodes :P (unless i missed that)

[War_Hero]

Hmm, I'm not getting anywhere with this. ?(

I've tried several things, and nothing is working. I'll attach the code (because every time I tried posting it, it was stretched over 2 lines! :?: ). If someone could take a look at it and see where I'm going wrong, I'd highly appreciate it if you could point me in the right direction. :)

 

Any help would be brilliant and much appreciated. :)

[Dominion]

sent you a youtube link in a pm about jquery and how to use it to fadein and out will look over the page if i get time but if not should help you a little (just so people don't think i am ignoring you lol) some much better people then me on here i am sure they will help :)

[rulerofzu]

Im all for learn it yourself but there is a lot to be said for pay a little for something pre-made. (HD's mod)

You can often learn quicker and a lot more by seeing how something works. Reverse engineering :D

[War_Hero]

I've managed to get it to fade in now :thumbsup: .

Only problem I have now is that the <span> that says whether or not the guess was correct (just a simple thing to test my checks) is not formatted. So, for example, if I guessed correctly, the word Correct! should appear in green with small-caps, but it doesn't. The word Correct! appears, just without styling.

Any ideas why this would be happening?

Thanks for the help, guys. I really appreciate it. :)