jq animate动画详解
生活随笔
收集整理的這篇文章主要介紹了
jq animate动画详解
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
// animate():第一個參數：{width:200} 運動的值和屬性
// 第二個-時間：默認400ms{},1000
//第三個-運動形式-兩種：1.默認：swing(慢快慢) 2.linear(勻速)
//第四個-回調函數
//$(this).animate({width:"300px",height:"300px"},2000,'linear',function(){alert(123)});
//stop():默認阻止當前運動，不阻止所有，stop(true) 阻止后續所有運動，stop(true,true) 當前運動立馬完成 = finish()立即完成運動。
stop(true,true) 停止到最終的目標點?
finish() 立即完成運動。
運動前加stop()可以清除運動隊列(不總是重復)。(鼠標移入移除 mouseover、out)
$(this).stop().animate({width:'200px'},1000) ?//針對的是同一個元素上面的效果
會用:
//動畫延遲 .leftToRight{left:0; } $('.leftToRight').delay(800).animate({left:100px},"solw");animated方法中沒有封裝transform屬性解決方案： （1）css方法$($sub).animate({},5000,function(){ $(this).css({'transform':'translateX(300px)'}); }) 在動畫函數的回調函數里執行。時間和效果就沒了意義，畢竟函數是在動畫完成之后才有調用（2）addClass方法 可以通過addClass()方法來代替此動作： 比如想旋轉一個icon 在css中加入一個classCss代碼 .add_transform{ transform:rotate(180deg); -ms-transform:rotate(180deg);/* IE9 */ -moz-transform:rotate(180deg);/* Firefox */ -webkit-transform:rotate(180deg);/* Safari和Chrome */ -o-transform:rotate(180deg);/* Opera */ transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;/*Firefox 4 */ -webkit-transition:all 0.5s ease-in-out;/* Safari和Chrome */ -o-transition:all 0.5s ease-in-out;/* Opera */ } 然后通過$(“選擇器”).toggleClass(“.add_transform”);來使icon的旋轉變為動畫效果。 <script> //jQuery動畫animate和scrollTop結合使用 $('li').click(function(){//$(document).scrollTop($(this).index()*viewHeight);var H = $(this).index()*viewHeight;var heiGht = $('#div1').offset().top;$('html,body').animate({scrollTop: H}, 1000);}); </script> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <style>#box { width: 100px; height: 100px; background-color: red; position:absolute; } #pox { width: 100px; height: 100px; background-color: green; position: absolute; top: 200px; } </style> </head> <body><input type="button" class="button" value="開始" /><input type="button" class="stop" value="停止" /> <div id="box">box</div> <div id="pox">pox</div> <script type="text/javascript">$(function () { $(".button").click(function () { $("#box").animate({ left: "300px" //要想使用left top bottom right這種方向性的屬性 先必須對"#box元素設置CSS 絕對定位 }) }) //-------------------------------------同步動畫 $(".button").click(function () { $("#box").animate({ width: "300px", height: "200px", opacity:0.5, //透明度為0.5 注：透明度的值在0-1之間 fontSize:"200px", //字體大小設為30px }) //第一個參數：是一個對象，他是鍵值對的css }) //讓指定元素左右移動$("#right").click(function(){$(".block").animate({left: '+50px'}, "slow");});$("#left").click(function(){$(".block").animate({left: '-50px'}, "slow");});//--------------------------------------列隊動畫,一個一個來 $(".button").click(function () { $("#box").animate({ width: "300px"}, 1000, function(){ $("#box").animate({height:"200px"},1000,function(){ $("#box").animate({opacity:0.5},1000,function(){ $("#box").animate({fontSize:"150px"},1000,function(){alert("完畢")}) }); }); }); }) //在同一個元素的基礎上，使用鏈式(隊列)調用也可以實現列隊動畫 $(".button").click(function () { $("#box") .animate({ width: "300px" }, 1000) .animate({ height: "200px" }, 1000) .animate({ opacity: 0.5 }, 1000) .animate({ fontSize: "150px" }, 1000, function () { alert("列隊動畫執行完畢")}) }); //那我們現在的需求是：不管你有幾個元素，我都要他們依次實現列隊動畫效果。(測試了一下，只能用這種回調函數嵌套的方式來實現了) $(".button").click(function () { $("#box").animate({ width: "300px" }, 1000, function () { //box$("#pox").animate({ height: "200px" }, 1000, function () { //#pox$("#box").animate({ height: "200px"}, 1000, function () { $("#pox").animate({ fontSize: "150px" }, 1000, function () { alert("列隊動畫執行完畢") }); }) }) }) }) //那下面再來了解下，列隊動畫的停止 $(".button").click(function () { $("#box").animate({ left: "300px" },1000) .animate({ bottom: "300px" }, 1000) .animate({ width: "300px" }, 1000) .animate({ height: "300px" }, 1000) }) $(".stop").click(function () { $("#box").stop(true); // 加參數停止所有動畫，不加停止當前 }) //現在，我們想繼續在.queue()方法后面再增加一個隱藏動畫，這時發現居然無法實現。 這是.queue()特性導致的。 有兩種方法可以解決這個問題，jQuery 的.queue()的回調函數可以傳遞一個參數， 這個參數是next 函數，在結尾處調用這個next()方法即可再鏈式執行列隊動畫。 //鏈式編程實現隊列動畫 $(".button").click(function () { //四個動畫 $("#box") .slideUp(1000) .slideDown(1000) .queue(function (next) { //這個next是一個函數 $(this).css("background", "yellow"); next();}) .hide(1000); }); //順序編程實現隊列動畫 我們看到使用順序調用的列隊，逐個執行，非常清晰 $(".button").click(function () { $("#box").slideUp(1000); $("#box").slideDown(1000); $("#box").queue(function (next) { $(this).css("background", "yellow"); next(); }); $("#box").hide(1000); }); });</script> </body>?
總結
以上是生活随笔為你收集整理的jq animate动画详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux杂谈之jq命令
- 下一篇： zcmu-1599 卡斯丁狗的炉石传说