Jqueryラーニング(2)—ダイナミック効果の非表示操作を実現
5556 ワード
Jqueryラーニング(二)-ダイナミック効果を非表示にするための基本関数セレクタ
<script type="text/javascript" src="jquery/jquery-1.8.0.js"></script>
<style type="text/css">
.div1 {
height: 10px;
display: none;
}
.panel {
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".p1").click(function() {
$(".div1").slideToggle("slow");
});
//hide() show() ：speed callback。
//callback hide show 。
//callback 。
//speed ："slow", "fast", "normal" milliseconds：
$("#hide").click(function() {
//1000
$("#p1").hide(1000,function(){
alert(" ");
});
});
$("#show").click(function() {
$("#p1").show(1000,function(){
alert(" ");
});
});
//jQuery toggle() show() hide() HTML 。
// ，
$("#toggle").click(function() {
$("#p1").toggle(1000);
});
//jQuery - slideDown, slideUp, slideToggle
$("#filp").click(function() {
$(".panel").slideDown(1000);
});
$("#filp2").click(function() {
$(".panel").slideUp(1000);
});
$("#filp3").click(function() {
$(".panel").slideToggle(1000);
});
//jQuery Fade - fadeIn(), fadeOut(), fadeTo()
$("#fadeTo").click(function() {
$("#testDiv").fadeTo("slow", 0.35);
});
$("#fadeOut").click(function() {
$("#testfadeOut").fadeOut(2000);
});
//jQuery
$("#animation1").click(function() {
$("#testDiv2").animate({
height : 300
}, "slow");
$("#testDiv2").animate({
width : 300
}, "slow");
$("#testDiv2").animate({
height : 100
}, "slow");
$("#testDiv2").animate({
width : 100
}, "slow");
});
$("#animation2").click(function(){
alert(11111);
$("#testDiv3").animate({left:"100px"},"slow");
$("#testDiv3").animate({fontSize:"3em"},"slow");
});
});
</script></head>
<body>
<div class="div1">
<p>SDGDFGHFDHFGHGFHFHDFHGDFHGDFGHDFHBDFHGFHD</p>
<p>SDGDFGHFDHFGHGFHFHDFHGDFHGDFGHDFHBDFHGFHD</p>
</div>
<p class="p1"> ..</p>
<p></p>
<div id="testDiv"
style="background: yellow; width: 300px; height: 300px;">
<button id="fadeTo">Click fadeTo</button>
</div>
<p></p>
<div id="testfadeOut" style="background: yellow; width: 200px">CLICK
ME AWAY!</div>
<button id="fadeOut">Click fadeOut</button>
<p></p>
<p id="p1">
If you click on the "Hide" button, I will disappear. <br>If you
click on the "Hide" button, I will disappear.</br>
</p>
<button id="hide">hide</button>
<button id="show">show</button>
<button id="toggle">toggle</button>
<p></p>
<div class="panel">
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>At W3School, you can study everything you need to learn, in an
accessible and handy format.</p>
</div>
<button id="filp">slideDown</button>
<button id="filp2">slideUp</button>
<button id="filp3">slideToggle</button>
<p></p>
<button type="button" id="animation1">Start animation1</button>
<button type="button" id="animation2">Start animation2</button>
<div id="testDiv2"
style="background: green; width: 100px; height: 100px;"></div>
<div id="testDiv3"
style="background: #98bf21; height: 100px; width: 200px; position: relative">
HELLO</div>
<p></p>
</body>