JQuery :: effects
Hello all!
In this primer I wanted to talk about JQuery a little and focus on the visual effects it allows.
JQuery is a JavaScript library, it is very very robust and provides awesome features, among the most important is the extension of the html DOM into a JSON like schema which allows ajax interaction very easily and many visual aids.
First we need to get a copy of JQuery, as of this writing the latest version is 1.2.6 and can be downloaded here.
The Basics:
Since JQuery is a Javascript library we need to include it in out html document:
<html> <head> <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
This is all it takes to include A js file in an html document.
Also, JQuery extends the html DOM so we can refer to any id using #nav, like this:
$("#divId")....
from there you can act upon the element with id “divId”
Ok, having said that we now can move on to the fun part 
Effects available
JQuery comes with many effects available from the get go, we cannot look at every one of them but here is a link to a nice JQuery page
Effect::Show
The show effect is a nice one, like the name suggest it shows hidden elements (only hidden elements, if you want new elements like createNode-like then you have to create them hidden).
This function can receive 2 parameters, the first one is the speed we want, how long the animation should run and its set in milliseconds, but JQuery is so flexible it also understands “slow”, “normal” and “fast”. The second parameter is a callback function, a function that will be run after the animation completes:
<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
function hShow()
{
$("p").show("slow");
}
</script>
</head>
<body>
<input type="button" onClick="hShow();" value="show paragraph">
<p style="display:none"> This is the hidden paragraph </p>
</body>
</html>
Pretty neat huh? feel free to play around with this as it can become very useful in your apps.
Effect::Hide
I wont dwell into this one too much because its basically the same as show, even same prototype, the point here is that it hides already visible elements.
Effect::Toggle
This nicey here is a combination of the two above, if its hidden toggles it shown, if its shown switch to hidden:
<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
function hToggle()
{
$("p").toggle("slow");
}
</script>
</head>
<body>
<input type="button" onClick="hToggle();" value="show paragraph" id="bEffect">
<p style="display:none"> This is the hidden paragraph </p>
Third post
</body>
</html>
Now although the official documentation doesnt say if it allows a parameter or two or not I’ve tried the speed parameter like in the show/hide effects and its worked fine for me so guess its only an outdated doc there. Try using the “slow”, “normal” and “fast” ones to see what I mean 
Effect::SlideDown and SlideUp
Both of these effects reveal hidden content, and accept the speed parameter:
<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
function hSlideUp()
{
$("p").slideUp("slow");
}
function hSlideDown()
{
$("p").slideDown("fast");
}
</script>
</head>
<body>
<input type="button" onClick="hSlideUp();" value="Slide Up" id="bEffect">
<input type="button" onClick="hSlideDown();" value="Slide Down" id="bEffect">
<p style="display:none">
This is the hidden paragraph<br>
This is the hidden paragraph<br>
This is the hidden paragraph<br>
This is the hidden paragraph<br>
This is the hidden paragraph<br>
</p>
</body>
</html>
There is also an effect toggle for this, like the toggle in the show and hide only this one is called: slideToggle()
Effect::FadeIn
The fade in effect changes the opacity of an element from zero to completely visible, pretty cool effect if you ask me, in the official documentation comes an example of a censor message, this is accomplish by having a hidden div inside the outer div, and using the callback parameter, like this:
<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
function hFadeIn()
{
$("#censor").fadeIn(5000, function() // this is the fadeIn for the outer div
{
$("#censorTxt").fadeIn(4000) // this is the fadeIn for the text
}
);
}
</script>
</head>
<body>
<input type="button" onClick="hFadeIn();" value="Fade In" id="bEffect">
<p style="" id="nav">
This is the hidden paragraph<br>
This is the hidden paragraph<br>
This is the hidden paragraph<br>
This is the hidden paragraph<br>
This is the hidden paragraph<br>
<div id="censor" style="display:none; width:300px; height:300px; background:red; position:absolute; top:0; left:0">
<div id="censorTxt" style="display:none; color:yellow">CENSORED!</div>
</div>
</p>
</body>
</html>
The trick there is using css to position the red div on top of the text.
And last but by no means least…
Effect:Animate
This very well may be the best “effect” available, it isnt really an efefct but a means to create custom effects, for example you can have a div enlarged and its text made bigger, like this:
<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
function hAnimate()
{
$("#nav").animate({width:"50%", fontSize: "30px", opacity: 0.3, borderwidth: "15px"}, 4000);
}
</script>
</head>
<body>
<input type="button" onClick="hAnimate();" value="Animate" id="bEffect">
<div style="background: yellow; width:100%" id="nav">
This is the hidden paragraph<br>
This is the hidden paragraph<br>
This is the hidden paragraph<br>
This is the hidden paragraph<br>
This is the hidden paragraph<br>
</div>
</body>
</html>
In the first parameter you make an array with the target result you want, here I tried text-align and background and those 2 so dont rely on every tag you know to work here, still this offers great flexibility and can come up as a great way to make your pages live a little
Hope you liked this small post about effects and can profit from it
“Be well” (taken from Demolition Man hehe)
Another great tutorial Purefan. I just wanted to mention in case anyone missed it earlier we are using jQuery as our JavaScript framework so read up if you plan on creating mods that will use JavaScript.
I should also mention that you don’t have to use jQuery in order to create mods with phpFox2, it just makes things a lot easier once you have learned it.
[Reply]
Yeah I agree. I’ve done some fancy stuff using it following the tutorials there. Here’s a great link http://docs.jquery.com/Tutorials
[Reply]
Another great jQuery Plugin is NyroModal replacement of Lytebox
http://nyromodal.nyrodev.com/
[Reply]
Why phpfox doesn’t update jQuery to new 1.3.2 ?
why use 1.2.6 ?
[Reply]
Purefan Reply:
October 20th, 2009 at 1:11 am
version compatibility. Using 1.2.6 the script works fine, we did try updating it but the entire script broke, given the time constraints we havent been able to “fix” the script so it works with 1.3.2
[Reply]
full effect for jquery . it great code sample.
[Reply]
Very nice and useful tutorials to web designers,
Thanks for posting.
[Reply]