您的位置：首页 > Web前端 > JQuery

浅谈jQuery——jQuery基本动画效果

2014-01-04 11:39 363 查看

浅谈jQuery——jQuery基本动画效果

jQuery基本动画效果学习案例:
<!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 runat="server">
<title>jQuery——动画</title>
<style type="text/css">
.div_main
{
width: 100%;
height: 100%;
}
.divOne
{
width: 800px;
height: 400px;
margin: 20px;
position: relative;
border: solid 5px rgb(230, 235, 236);
background-color: rgb(136, 116, 116);
}
.mytest_One
{
width: 150px;
height: 50px;
left: 50%;
top: 45%;
position: absolute;
background-color: Fuchsia;
border: solid 5px rgb(230, 235, 236);
}
.display
{
display: none;
}
</style>

<script src="Script/jquery-1.7.2.min.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
$(function() {
var $div = $("div .divOne");

/*********** 隐藏/显示 ***********/
$("#btn_one").click(function() {
if ($div.is(":visible")) {
$(this).attr("title", "点击显示");
} else {
$(this).attr("title", "点击隐藏");
}
$div.toggle(1000);

/*
方法二：
if ($div.is(":visible")) {
$div.hide(600);
$div.attr("title", "点击显示");
} else {
$div.show(800);
$div.attr("title", "点击隐藏");
}
*/
});

/*********** 淡入/淡出 ***********/
$("#btn_two").click(function() {
/*
方法一：
if(fadeIn){
$(this).attr("title","点击淡入");
$div.fadeOut("slow");  //淡出

fadeIn = false;
}else{
$(this).attr("title","点击淡出");
$div.fadeIn("slow");  //淡入

fadeIn = true;
}
*/

//方法二：
if ($div.is(":visible")) {
$(this).attr("title", "点击淡入");
} else {
$(this).attr("title", "点击淡出");
}

$div.fadeToggle(1000);
});

/*********** 伸展/收缩 ***********/
$("#btn_three").click(function() {
/*
方法一：
if(shenzhan){
$(this).attr("title","点击伸展");
$div.slideUp("slow");

shenzhan = false;
}else{
$(this).attr("title","点击收缩");
$div.slideDown("slow");

shenzhan = true;
}
*/

//方法二：
if ($div.is(":visible")) {
$(this).attr("title", "点击伸展");
}
else {
$(this).attr("title", "点击收缩");
};

$div.slideToggle(1000);
});

/*********** animate自定义动画 ***********/
$("#btn_four").click(function() {
if (!$div.is(":animated")) {
//是否有动画在进行，防止动画队列累加
$div.animate(
{
left: "+=50px",
height: "-=35px",
width: "-=70px",
opacity: "-=0.08"   //透明度
},
1000                 //时间(单位：秒)
);
}
});

/*********** 我向上飞出 ***********/
$("#btn_five").click(function() {
var div_Html = "<div id='mytest' class='mytest_One display'><!-- 我向上飞出 -->" +
"<div align='left' style='border: 1px; background-color: Gray; color: White'>title</div>" +
"<font color='white'>我飞了</font>" +
"</div>";
$("body").append(div_Html);

var $myDiv = $("#mytest");
$myDiv.removeClass("display");

if (!$myDiv.is("animated")) {
$myDiv.animate(
{
top: "-10%",
opacity: "0"
},
2000,         //时间(单位:毫秒)
function() {
//移除元素
$("#mytest").remove();
}
);
}
});

/*********** 重置 ***********/
$("input[type='reset']").click(function() {
window.location.reload();
});
});
</script>

</head>
<body>
<div class="div_main">
<fieldset>
<legend>jQuery动画</legend>
<input id="btn_one" type="button" value="隐藏/显示" title="" style="margin-left: 20px" />
<input id="btn_two" type="button" value="淡入/淡出" title="" style="margin-left: 40px" />
<input id="btn_three" type="button" value="伸展/收缩" title="" style="margin-left: 40px" />
<input id="btn_four" type="button" value="animate自定义动画" title="" style="margin-left: 40px" />
<input id="btn_five" type="button" value="向上飞出" title="" style="margin-left: 40px" />
<input type="reset" value="重置" title="点击重置" style="margin-left: 40px" />
<div class="divOne">
</div>
</fieldset>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery javascript 动画 xhtml
相关文章推荐
新的分享
章节导航