Jquery Basics Series - 2
Wall Script
Follow Me:
Wednesday, November 04, 2009

Jquery Basics Series - 2

Very good response about "Jquery Basic Series - 1". Last series discussed about jquery installation and introduction. In this post I want to explain about animation Effects and Attributes.



Effects

Fading Out and In : $(selector).fadeOut() and $(selector).fadeIn()
Sliding Up and Down : $(selector).slideUp() and $(selector).slideDown()
Sliding Toggle : $(selector).slideToggle()
Custom animation effect : $(selector).animate() // I will discuss this in upcoming post.

Fading Effect
Fading Out and In the div tag id='box'. Here you can change the effect speed fadeOut(speed,callback) Eg. fadeOut("fast" or "slow"), fadeOut(300). Take a look at Live Demo
<script type="text/javascript">
$(function()
{

$('.fadeOut_box').click(function()
{
$('#box').fadeOut("slow");
//Sliding effect just replace fadeOut() to slideUp()
});

$('.fadeIn_box').click(function()
{
$('#box').fadeIn("slow");
//Sliding effect just replace fadeIn() to slideDown()
});

});
</script>
<body>
<a href="#" class="fadeOut_box">fadeOut()</a>
<a href="#" class="fadeIn_box">fadeIn()</a>
<div id="box"></div>
</body>
CSS code
#box
{
background-color:#96BC43;
border:solid 3px #333333;
height:160px;
margin-top:30px;
}

Attributes

attr()
Using this method attr() makes it easy to retrieve a property value from the matched element. $(selector).attr(properties); Eg Attributes: id, class, title, src, href, etc... Take a look at Live Demo
<script type="text/javascript">
$(function()
{
$('.link').click(function()
{
var id=$(this).attr("id");
var class=$(this).attr("class");
var href=$(this).attr("href");
alert(id);
alert(class);
alert(href);
});
});
</script>
<a href="http://www.9lessons.info" class="link" id="901">link</a>



html()
Get the html contents (innerHTML) of the matched element. $(selector).html(). Take a look at Live Demo
<script type="text/javascript">
$(function()
{
$('.link').click(function()
{
var href=$(this).attr("href");
$("h1").html(href);
});
});
</script>
<a href="http://www.9lessons.info" >Click </a>
Link HREF value : <h1></h1>

addClass()
Adds the specified class to each of the set of matched elements. $(selector).addClass(). Take a look at Live Demo

<script type="text/javascript">
$(function()
{
$('.changeclass').click(function()
{
$(".big").addClass("small");
});
});
</script>
<a href="#" class="changeclass" >Click </a>
<div class="big">www.9lessons.info</div>

CSS Code
.big
{
font-size:106px;
}
.small
{
font-size:12px;
}

Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


14 comments:

  1. Thanks to your series I'm finally using jQuery ;) so thank you very much

    ReplyDelete
  2. Thank you very much, it´s a good tutorial like first part ... I´awaiting 3th parte :D ...!! joi

    ReplyDelete
  3. You are always Best .. ThankU

    ReplyDelete
  4. Very helpfull,

    http://phpdesktop.blogspot.com/

    ReplyDelete
  5. http://demos.9lessons.info/basics/effects.html# when i test IE , it showing error

    ReplyDelete
  6. Awesome way to guide newbies... :)

    ReplyDelete
  7. Why not release a book on these posts?

    ReplyDelete
  8. This tutorial is really great one.

    change the var class line. Class is a keyword which cannot accepted by a variable. It will not work. Please change.

    == by sasikumarudu

    ReplyDelete

Make in India