Oct 22, 2009

Fun with JQuery Effects – few examples

You can use JQuery Effects in many different ways. I'll write few examples just to show how cool and fun is to work with this API.

Using toggle:

toggle.html
<html>
<head>
<title>JQuery examples</title>
<style>
</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$("#our_button").click(function() {
$("#our_image").toggle();
});
});
</script>
</head>
<body>

<button id="our_button">Hide/Show</button> the image.
<br /><br />
<div id="our_image">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSMhLVeVRnBTwKXkBjFX-nOQusSJyKsneDo-yTxCWJtDGVFg2FMzr4vSEWTDjCm7WgGWW1KFYadgz0y3gyXd7kuBMcMIlWijcK3ikxqRVciTwJWdaaiT6Z62m6pGWQNhKILC2oWF4Hmw/s320/flower.jpg" />
</div>
</body>
</html>


And the result:


the image.



Using slide toggle:

slide.html
<html>
<head>
<title>JQuery examples</title>
<style>
</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$("#our_button").click(function() {
$("#our_image").slideToggle("slow");
});
});
</script>
</head>
<body>

<button id="our_button">Hide/Show</button> the image.
<br /><br />
<div id="our_image">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSMhLVeVRnBTwKXkBjFX-nOQusSJyKsneDo-yTxCWJtDGVFg2FMzr4vSEWTDjCm7WgGWW1KFYadgz0y3gyXd7kuBMcMIlWijcK3ikxqRVciTwJWdaaiT6Z62m6pGWQNhKILC2oWF4Hmw/s320/flower.jpg" />
</div>
</body>
</html>


And the result:


the image.



Easy, isn't it? Tomorrow I'll continue with animate function.

5 comments:

Anonymous said...

everyone knows about this.

Anonymous said...

ur a genius...

robert said...

It might be a dumb question but how do I get the image to be hidden by default?

István said...

Why replicate what is already on the jQuery docs site? Come on, be a bit more adventurous! ;-)

In reply to robert's question above:

#our_image { display: none; }

OR

$("#our_button").click(function() {
$(this).slideToggle("slow");
}).hide();

umaroy said...

tracers

Popular Posts