Jquery Tutoriel part 1 : Show() Hide() toggle()
Jquery Tutoriel part 1
$('.myelem').show( duration [, callback] ) : it's used to show the element ("myelem").
$('.myelem').hide( duration [, callback] ):it's used to hide the element ("myelem").
$('.myelem').toggle( duration [, callback] ): it's used to show and hide the element("myelem") at the same time.
callback : the function to call once the animation is done.
duration : a number determining how long the animation will run.
hide()
click hide and we see the result
click hide and we see the result
Show() : and now click show
Toggle() : finally click toggle
hide
and show again
finally the full code :
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").hide(700,function(){});
});
$("#show-box").click(function(){
$("#show_div").show(700,function(){});
});
$("#toggle_box").click(function(){
$("#toggle_div").toggle(700,function(){});
});
});
</script>
</head>
<body>
<span class="a"><a>Example : Hide box</a></a></span><br><br>
<span id="hide-box">Hide box</span><br><br>
<div id="li-box" class="li-box" >Hide</div><br>
<span class="a"><a>Example : Show box</a></span></a><br><br>
<span id="show-box">Show</span><br><br>
<div id="show_div" class="show_div" style="display:none" >Show</div>
<br>
<span class="a"><a>Example : Toggle</a></span><a></a><br><br>
<span id="toggle_box">Show/Hide</span><br><br>
<div id="toggle_div" class="show_hide" >Show/Hide</div>
<br>
0 commentaires:
Post a Comment