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");
$('.fadeIn_box').click(function()
{
$('#box').fadeIn("slow");
});
</script>
CSS code$(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>
#box
{
background-color:#96BC43;
border:solid 3px #333333;
height:160px;
margin-top:30px;
}
{
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>
$(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://9lessons.blogspot.com" 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>
$(function()
{
$('.link').click(function()
{
var href=$(this).attr("href");
$("h1").html(href);
});
});
</script>
<a href="http://9lessons.blogspot.com" >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>
$(function()
{
$('.changeclass').click(function()
{
$(".big").addClass("small");
});
});
</script>
<a href="#" class="changeclass" >Click </a>
<div class="big">9lessons.blogspot.com</div>CSS Code
.big
{font-size:106px;
}
.small
{font-size:12px;
}
NICE. thank you
Thanks to your series I'm finally using jQuery ;) so thank you very much
Thank you very much, it´s a good tutorial like first part ... I´awaiting 3th parte :D ...!! joi
You are always Best .. ThankU
Really very helpful.Thank you
Very helpfull,
http://phpdesktop.blogspot.com/
http://demos.9lessons.info/basics/effects.html# when i test IE , it showing error
usfull
very usefull