JQuery animate動畫應用示例

來源：懂視網責編：小采時間：2020-11-27 21:57:09

JQuery animate動畫應用示例

JQuery animate動畫應用示例:本文實例講述了JQuery animate動畫。分享給大家供大家參考，具體如下：滑動選項卡 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title&

推薦度：

點擊下載本文 文檔為doc格式

導讀JQuery animate動畫應用示例:本文實例講述了JQuery animate動畫。分享給大家供大家參考，具體如下：滑動選項卡 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title&

本文實例講述了JQuery animate動畫。分享給大家供大家參考，具體如下：

滑動選項卡

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style type="text/css">
 .btns input{
 width: 100px;
 height: 40px;
 background-color: grey;
 border: 0;
 }
 .btns .current{
 background-color: gold;
 }
 .cons .slides div{
 width: 500px;
 height: 300px;
 background-color: gold;
 /*display: none;!*整體都不顯示了*!*/
 text-align: center;
 line-height: 300px;
 font-size: 30px;
 float: left;/*把三個div由隱藏改為浮動*/
 }
 .cons{
 width: 500px;
 height: 300px;
 overflow: hidden; /*超過cons的slide隱藏*/
 position: relative;/*相對于slide絕對定位*/
 }
 .slides{
 width: 1500px;
 height: 300px; /*把slide加長*/
 position: absolute;/*相對于cons相對定位*/
 }
 .cons .active{
 display: block;
 }
 </style>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script type="text/javascript">
 $(function () {
 var $btn=$('.btns input');
 var $slides=$('.cons .slides');
 // alert($btn.length);
 // alert($div.length);
 $btn.click(function () {
 // 我點擊哪一個按鈕，$(this)就指的是誰,而this
 //指的是原生的，$（this）指的是JQuery的
 // $(this).siblings().removeClass('current');
 // $(this).addClass('current');//可以用鏈式調用
 $(this).addClass('current').siblings().removeClass('current');
 // var num=$(this).index();
 // $div.eq($(this).index()).addClass('active').sibling().removeClass('active');
 $slides.animate({left:(-500*$(this).index())});
 })
 })
 </script>
</head>
<body>
 <div class="btns">
 <input type="button" name="" value="01" class="current">
 <input type="button" name="" value="02">
 <input type="button" name="" value="03">
 </div>
 <div class="cons">
 <div class="slides">
 <div >選項卡1的內容</div>
 <div>選項卡2的內容</div>
 <div>選項卡3的內容</div>
 </div>
 </div>
</body>
</html>

將slides下面的div由隱藏改為浮動，將cons設置成絕對定位，將slides改為相對定位。超過cons的slides隱藏。
點擊事件發生之后，相對定位改變。

animate動畫

$div=$('#div1');
$div.animate({
 width:300,
 height:300
},1000,'swing',function () {
 alert('done');
})

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script type="text/javascript">
 $(function () {
 $box=$('.box');
 $box.animate({
 width:300,
 height:300
 },1000,'swing',function () {
 alert('done');
 })
 })
 </script>
 <style type="text/css">
 .box{
 width: 100px;
 height: 100px;
 background-color: gold;
 }
 </style>
</head>
<body>
 <div class="box"></div>
</body>
</html>

用animate動畫改變box大小，完成之后用回調函數彈出done

感興趣的朋友可以使用如下工具測試上述代碼運行效果：

在線HTML/CSS/JavaScript代碼運行工具：
http://tools.jb51.net/code/HtmlJsRun

在線HTML/CSS/JavaScript前端代碼調試運行工具：
http://tools.jb51.net/code/WebCodeRun

更多關于jQuery相關內容還可查看本站專題：《jQuery動畫與特效用法總結》、《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JQuery animate動畫應用示例

推薦度：

點擊下載本文 文檔為doc格式

標簽：動畫示例實例

熱門焦點

JQuery animate動畫應用示例

JQuery animate動畫應用示例

JQuery animate動畫應用示例

最新推薦

猜你喜歡

熱門推薦