jQueryアニメーション効果(表示と非表示)([スライド](Slide))(フェードアウト)
9803 ワード
jQueryはアニメーション効果を実現しますか?
1)
show()：
hide()：
togger()：
<script type="text/javascript">
$(function(){
$("tr:even").css("background-color","gray").eq(1).css("background-color","red");// tr ，
$("tr:gt(4)").hide();
$(".more").click(function(){
//$("tr:gt(4)").show();
$("tr:gt(4)").toggle();// 1 ， 1
});
});
script>
head>
<body>
<h3> ， ， ...h3>
<h4> ......<a href="#" class="more">（ ）a>
<table width="800px">
<tr><td> td>tr>
<tr><td> td>tr>
<tr><td> td>tr>
<tr><td> td>tr>
<tr><td> td>tr>
<tr><td> td>tr>
<tr><td>7 td>tr>
<tr><td> td>tr>
table>
<a href="#"> a>
body>2) “ ”
slidedown():
slideup()：
<script type="text/javascript">
$(function(){
$("h2").click(function(){
$("#div1").slideUp("slow");
});
$("h3").click(function(){
$("#div1").slideDown("slow");
});
});
script>
head>
<body>
<h2> h2>
<h3> h2>
<div id="div1" style="width: 200px;">
<p>
、 ， ， 。
， ：
p>
div>
body>3)
fadeIn：
fadeout：
<script type="text/javascript">
$(function(){
$("h2").click(function(){
$("#div1").fadeIn(2000);
});
$("h3").click(function(){
$("#div1").fadeOut("slow");
});
});
script>
head>
<body>
<h2> h2>
<h3> h2>
<div id="div1" style="width: 200px;">
<p>
、 ， ， 。
， ：
p>
div>
body>