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 Effectsand Attributes.
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 speedfadeOut(speed,callback) Eg. fadeOut("fast"
or "slow"), fadeOut(300).
Take a look atLive Demo
CSS code
Attributes
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
html()Get the html contents (innerHTML) of the matched element. $(selector).html().
Take a look at Live Demo
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>
<div class="big">9lessons.blogspot.com</div>
CSS Code
.big
{
font-size:106px;
}
.small
{
font-size:12px;
}
Jquery Basics Series - 3
" style="font-weight: inherit; font-family: inherit; font-style: inherit; font-size: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; padding-top: 9px; padding-right: 9px; padding-bottom: 9px; padding-left: 9px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(255, 255, 255); background-position: initial initial; background-repeat: initial initial;" />
Effects
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 speedfadeOut(speed,callback) Eg. fadeOut("fast"
or "slow"), fadeOut(300).
Take a look atLive Demo
<script type="text/javascript">
$(function()
{
$('.fadeOut_box').click(function()
{
$('#box').fadeOut("slow");
$('.fadeIn_box').click(function()
{
$('#box').fadeIn("slow");
});
</script>
$(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>
class="fadeOut_box">fadeOut()</a>
<a href="#"
class="fadeIn_box">fadeIn()</a>
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;
}
{
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>
class="link"
id="901">link</a>
html()
Take a look at Live Demo
<script type="text/javascript">
$(function()
{
$('.link').click(function()
{
var href=$(this).attr("href");
$("h1").html(href);
});
});
</script>
Link HREF value : <h1></h1>
$(function()
{
$('.link').click(function()
{
var href=$(this).attr("href");
$("h1").html(href);
});
});
</script>
<a href="http://9lessons.blogspot.com"
>Click </a>
>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>
class="changeclass"
>Click </a>
<div class="big">9lessons.blogspot.com</div>
CSS Code
.big
font-size:106px;
}
.small
font-size:12px;
}
0 comments:
Post a Comment