Jquery Tutorial part 3
video
fadeOut ( [speed|speed][, callback] ):
I to fade out the element by operating the transparency of each element is displayed.
Animation effects are executed at the speed that you specify.
Specifies the time, in milliseconds, to complete or, "slow", "normal", "fast", the speed. If "1500" for example, the animation is done over 1.5 seconds.
, "Normal" if it is omitted that I used.
In addition, you can also be specified in the second argument to the function to be called when the effect is complete.
By manipulating the transparency of each element, we fused to display the hidden items.
Animation effects are executed at the speed that you specify.
Specifies the time, in milliseconds, to complete or "slow", "normal", "fast" speed. If "1500" for example, the animation is more than 1.5 seconds.
"Normal" if it is omitted that I've used.
In addition, you can also be specified in the second argument of the function to call when the effect is complete.
fadeTo(speed, opacity, [callback]) :
I will give the effect of changing gradually to the specified value, the transparency of each element.
Animation effects are executed at the speed that you specify.
Specifies the time, in milliseconds, to complete or, "slow", "normal", "fast", the speed. If "1500" for example, the animation is done over 1.5 seconds.
(A state that does not transmit) concentration of 1 100%, to reach transparency is specified as a fully transparent state 0. If 0.33, this is the appearance of 33%, for example.
In addition, you may also be specified in the third argument to the function to be called when the effect is complete.
Animation effects are executed at the speed that you specify.
Specifies the time, in milliseconds, to complete or, "slow", "normal", "fast", the speed. If "1500" for example, the animation is done over 1.5 seconds.
(A state that does not transmit) concentration of 1 100%, to reach transparency is specified as a fully transparent state 0. If 0.33, this is the appearance of 33%, for example.
In addition, you may also be specified in the third argument to the function to be called when the effect is complete.
 |
Finale code :
<?/*
dzKabyle
http://web2-teach.blogspot.com
*/?>
<style>
.show_div, .li-box, .show_hide{
-webkit-border-radius: 15px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.show_div{
border:solid 1px #8e8e04;
background:#FFFFCC;
color:#222222;
padding:6px;
text-align:center;
}
.li-box{
border:solid 1px #27739d;
background:#94d5fb 97% ;
color:#222222;
padding:6px;
text-align:center;
}
.show_hide{
border:solid 1px #90ac13;
background:#eef4d3 ;
color:#222222;
padding:6px;
text-align:center;
}
.a {
font-size: 24px;
border:solid 1px #ba4c0e;
background:#ffcaa4;
color:#222222;
padding:6px;
text-align:center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function(){
$("#hide-box").click(function(){
$("#li-box").fadeOut(800,function(){});
});
$("#show-box").click(function(){
$("#show_div").fadeIn(800,function(){});
});
$("#toggle_box").click(function(){
$("#toggle_div").fadeTo(800,0.5,function(){});
});
});
</script>
</head>
<body>
<span class="a"><a>Example : fadeOut</a></a></span><br><br>
<span id="hide-box">Out</span><br><br>
<div id="li-box" class="li-box" >fadeOut</div><br>
<span class="a"><a>Example : fadeIn</a></span></a><br><br>
<span id="show-box">In</span><br><br>
<div id="show_div" class="show_div" style="display:none" >fadeIn</div>
<br>
<span class="a"><a>Example : fadeTo</a></span><a></a><br><br>
<span id="toggle_box">fadeTo</span><br><br>
<div id="toggle_div" class="show_hide" >Trans</div>
<br>
0 commentaires:
Post a Comment