怎么样显示正在显示和显示完成呢？就是问题中的效果。
什么代码可以表示出正在显示和显示完成的状态呢
2 回答
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>show()和hide()方法动画方式显示和隐藏元素</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#tip {
border:0px solid black;
height:26px;
width:280px;
margin-top:10px;
}
</style>
</head>
<body>
<h3>show()和hide()方法动画方式显示和隐藏元素</h3>
<div>
<h4>我喜欢吃的水果</h4>
<ul>
<li>苹果</li>
<li>甘桔</li>
<li>梨</li>
</ul>
<input id="hidval" type="hidden" value="0"/>
</div>
<div id="tip"></div>
<script type="text/javascript">
$(function () {
$("h4").bind("click", function () {
if ($("#hidval").val() == 0)
{
$("#tip").html("正在显示中");
$("ul").show(1000,function(){
$("#hidval").val(1);
$("#tip").html("显示完成");
});
}
else
{
$("ul").hide(1000,function(){
$("#hidval").val(0);
$("#tip").html("");
})
}
})
});
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>show()和hide()方法动画方式显示和隐藏元素</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h3>show()和hide()方法动画方式显示和隐藏元素</h3>
<div>
<h4>我喜欢吃的水果</h4>
<ul>
<li>苹果</li>
<li>甘桔</li>
<li>梨</li>
</ul>
<input id="hidval" type="hidden" value="0"/>
</div>
<script type="text/javascript">
$(function () {
$("h4").bind("click", function () {
if ($("#hidval").val() == 0) {
$("#state").remove();
$("body").append(
"<span id='state'>正在显示中</span>");
$("ul").show("slow",function(){
$("#hidval").val(1);
$("#state").remove();
$("body").append(
"<span id='state'>显示完成</span>");
})
} else {
$("#state").html("正在隐藏中");
$("ul").hide("slow",function(){
$("#hidval").val(0);
$("#state").remove();
$("body").append(
"<span id='state'>隐藏完成</span>");
})
}
})
});
</script>
</body>
</html>举报
0/150
提交
取消
