當前位置:首頁 > 新聞中心 > 建站方案
網站設計中經常會用到的jquery 動畫效果責任編輯 :李飛    文章來源 :星翼創想(www.cynkba.live)    發布時間 :2014-08-08    閱讀次數:1801

 網站設計中經常會用到的jquery 動畫效果,總結一下,用起來的時候會方便很多,現在的網頁設計中驚顫工會用到jQuery,所以多總結才能有進步。


隱藏和顯示

瞬間隱藏和顯示

$("#hide").click(function(){   $("p").hide(); });  $("#show").click(function(){   $("p").show(); });

漸顯、隱

$("button").click(function(){   $("p").hide(1000); });

在兩種狀態間切換

$("button").click(function(){   $("p").toggle(); });

淡入淡出

淡入

$(document).ready(function(){   $("button").click(function(){     $("#div1").fadeIn();     $("#div2").fadeIn("slow");     $("#div3").fadeIn(3000);   }); });

淡出

$(document).ready(function(){   $("button").click(function(){     $("#div1").fadeOut();     $("#div2").fadeOut("slow");     $("#div3").fadeOut(3000);   }); });

狀態切換

$(document).ready(function(){   $("button").click(function(){     $("#div1").fadeToggle();     $("#div2").fadeToggle("slow");     $("#div3").fadeToggle(3000);   }); });

淡出的不同速度、程度

$(document).ready(function(){   $("button").click(function(){     $("#div1").fadeTo("slow",0.15);     $("#div2").fadeTo("slow",0.4);     $("#div3").fadeTo("slow",0.7);   }); });

滑動

簡明語法

$(selector).slideDown(speed,callback); $(selector).slideUp(speed,callback); $(selector).slideToggle(speed,callback);

可選的 speed 參數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒。可選的 callback 參數是滑動完成后所執行的函數名稱。
向下滑動

$(document).ready(function(){   $(".flip").click(function(){     $(".panel").slideDown("slow");   }); });

向上滑動

$(document).ready(function(){   $(".flip").click(function(){     $(".panel").slideUp("slow");   }); });

折疊打開效果

$(document).ready(function(){ $(".flip").click(function(){     $(".panel").slideToggle("slow");   }); });

自定義動畫

jQuery animate()

$("button").click(function(){   $("div").animate({     left:’250px’,     opacity:’0.5’,     height:’150px’,     width:’150px’   }); });

animate()接受一個字典類型的參數,該參數決定所選元素動畫結束時所處的狀態
動畫的值可以是 "show"、"hide" 或 "toggle":

$("button").click(function(){   $("div").animate({     height:’toggle’   }); });

并且所有的動畫按照動畫序列來做

$("button").click(function(){   var div=$("div");   div.animate({height:’300px’,opacity:’0.4’},"slow");   div.animate({width:’300px’,opacity:’0.8’},"slow");   div.animate({height:’100px’,opacity:’0.4’},"slow");   div.animate({width:’100px’,opacity:’0.8’},"slow"); });

停止動畫

$(document).ready(function(){   $("#flip").click(function(){     $("#panel").slideDown(5000);   });   $("#stop").click(function(){     $("#panel").stop();   }); });

$(selector).stop(stopAll,goToEnd);
可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false,即僅停止活動的動畫,允許任何排入隊列的動畫向后執行。
可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。

當然jquery語句也可以級聯調用

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

文章轉載請保留網址:http://www.cynkba.live/news/solutions/1000.html

浙江快乐彩微信号 拥有保险公司承保的理财平台 湖北快三明天预测号码 什么软件有三分赛车 鼎牛配资 彩金捕鱼ol 送9元棋牌? 天津麻将手机app玩哪个 湖北快三牛彩专用走 彩票5分赛车怎么玩法 宜昌血流换三张手机下载 一元麻将微信群 欧冠结果 网赚项目都有什么 追光棋牌游戏 秒速快3是假的吗 新十一选五开奖