JQuery實現(xiàn)DIV其他動畫效果的簡單實例
更新時間：2016年09月18日 11:33:31 投稿：jingxian
下面小編就為大家?guī)硪黄狫Query實現(xiàn)DIV其他動畫效果的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
1.toggle
切換對象的隱藏和顯示，可以用來代替show和hide
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
#div1
{
width:200px;
height:200px;
background-color:red;
border:1px black solid;
clear:both;
}
#btn,#info
{
float:left;
}
#info
{
margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var msg1;
var msg2;
if($("#div1").css("display")=="none")
{
msg1="正在顯示...";
msg2="顯示完畢!";
}
else
{
msg1="正在隱藏...";
msg2="隱藏完畢!";
}
$("#info").html(msg1);
$("#div1").toggle(4000,function(){
$("#info").html(msg2);
});
});
});
</script>
</head>
<body>
<input type="button" value="變換" id="btn" />
<div id="info">1</div>
<div id="div1"></div>
</body>
</html>
2.fadeIn fadeOut
fadeIn 淡入（本來是隱藏的），fadeOut 淡出（本來是顯示的）
fadeOut
淡出的時候 這一塊的空間就會被隱藏 而下方的模塊會往上移動
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
#div1
{
width:200px;
height:200px;
background-color:red;
border:1px black solid;
clear:both;
}
#btn,#info
{
float:left;
}
#info
{
margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("#div1").fadeOut(4000);
});
});
</script>
</head>
<body>
<input type="button" value="變換" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>
fadeIn
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
#div1
{
width:200px;
height:200px;
background-color:red;
border:1px black solid;
clear:both;
}
#btn,#info
{
float:left;
}
#info
{
margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
$("#div1").css("display","none");
$("#btn").click(function(){
$("#div1").fadeIn(4000);
});
});
</script>
</head>
<body>
<input type="button" value="變換" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>
3.fadeTo
切換到一個指定的透明度：0表示徹底透明，1表示不透明。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
#div1
{
width:200px;
height:200px;
background-color:red;
border:1px black solid;
clear:both;
}
#btn,#info
{
float:left;
}
#info
{
margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("#div1").fadeTo(4000,0.1);
});
});
</script>
</head>
<body>
<input type="button" value="變換" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>
4.slideUp和slideDown
slideUp：向上滑動隱藏對象
slideDown:向下滑動顯示對象（說明本來是隱藏的）
slideUp
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
#div1
{
width:200px;
height:200px;
background-color:red;
border:1px black solid;
clear:both;
}
#btn,#info
{
float:left;
}
#info
{
margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("#div1").slideUp(4000);
});
});
</script>
</head>
<body>
<input type="button" value="變換" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>
slideDown
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
#div1
{
width:200px;
height:200px;
background-color:red;
border:1px black solid;
clear:both;
}
#btn,#info
{
float:left;
}
#info
{
margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
$("#div1").css("display","none");
$("#btn").click(function(){
$("#div1").slideDown(4000);
});
});
</script>
</head>
<body>
<input type="button" value="變換" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>
5.slideToggle
滑動實現(xiàn)對象的隱藏與顯示切換
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
#div1
{
width:200px;
height:200px;
background-color:red;
border:1px black solid;
clear:both;
}
#btn,#info
{
float:left;
}
#info
{
margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("#div1").slideToggle(4000);
});
});
</script>
</head>
<body>
<input type="button" value="變換" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>
以上這篇JQuery實現(xiàn)DIV其他動畫效果的簡單實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery實現(xiàn)字符串全部替換的方法
- 解決同一頁面中兩個iframe互相調用jquery,js函數(shù)的方法
- jQuery實現(xiàn)刪除li節(jié)點的方法
- 詳解jQuery中的事件
- 利用JQuery阻止事件冒泡
- 基于jQuery的select下拉框選擇觸發(fā)事件實例分析
- 淺談jquery之on()綁定事件和off()解除綁定事件
- 通過jquery實現(xiàn)頁面的動畫效果(實例代碼)
- 利用jQuery的動畫函數(shù)animate實現(xiàn)豌豆發(fā)射效果
- 原生js實現(xiàn)jquery函數(shù)animate()動畫效果的簡單實例
- jQuery Ajax 加載數(shù)據時異步顯示加載動畫
- asp.net創(chuàng)建事務的方法
相關文章
這篇文章主要為大家詳細介紹了jquery實現(xiàn)鼠標懸浮彈出氣泡提示框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
在使用PDFObject.js時，由于后臺需要轉換數(shù)據，在前臺顯示的時候，有很長一段時間顯示空白頁面，所以想到寫一個假的加載動畫，下面看下實現(xiàn)代碼2016-12-12
本篇文章主要介紹了jquery——九宮格大轉盤抽獎實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
jQuery使用$.extend(true,object1, object2);實現(xiàn)深拷貝對象的方法分析
這篇文章主要介紹了jQuery使用$.extend(true,object1, object2);實現(xiàn)深拷貝對象的方法,結合實例形式分析了jQuery中$.extend(true,object1, object2);進行深拷貝操作相關實現(xiàn)技巧,需要的朋友可以參考下2019-03-03
jQuery中的.bind()、.live()和.delegate()之間區(qū)別分析
jQuery中的.bind()、.live()和.delegate()之間區(qū)別分析，學習jquery的朋友可以參考下。2011-06-06
在jQuery里有一個each方法，用起來非常的爽，不用再像原來那樣寫for循環(huán)，下面介紹each的幾種常用的用法2014-01-01
在Web開發(fā)中，經常會涉及到文件上傳。文件上傳時通常都要驗證文件的有效性，這個通常就要用正則表達式來判斷。2015-05-05
這篇文章主要介紹了使用jQuery實現(xiàn)圖片遮罩半透明墜落遮擋，效果非常棒，小伙伴們做相冊的時候可以直接拿走使用。2015-03-03
這篇文章主要介紹了EasyUI中在表單提交之前進行驗證的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
jQuery獲得各種控件Value的方法，使用jquery的朋友可以參考下。2010-11-11