使用jQuery如何實作動畫?以下這篇文章為大家介紹一些jQuery實作預訂動畫或自訂動畫的方法,希望對大家有幫助!
顯示與隱藏
show( )
方法和hide()
方法是jQuery 中最基本的動畫方法。具體語法如下:
$element.show([speed],[easing],[fn]); $element.hide([speed],[easing],[fn]);
/* 显示与隐藏 1.无动画版本 * show()- 显示 * hide() - 隐藏 2.有动画版本 - 同时改变宽度和高度 * show (speed,callback) * speed - 动画执行的时长,单位为毫秒 * callback - 动画执行完毕后的回调函数 * hide (speed, callback) * speed - 动画执行的时长,单位为毫秒 * callback - 动画执行完毕后的回调函数 */ $('#box').hide(2000,function(){ $('#box').show(2000); });
滑動動畫
#slidelUp()
方法和slideDown()
方法透過改變高度值來實現動畫效果。具體語法如下:
$element.slideUp([speed],[easing],[fn]); $element.slideDown([speed],[easing],[fn]);
/* 滑动式动画 - slideup()和slideDown() * 注意 - 没有无动画版本(底层代码预定义动画执行的时长) * 效果 - 改变指定元素的高度 */ $('#box').slideUp(3000); $('#box').slideDown(3000);
淡入淡出效果
#fadeln()
方法和fadeOut()
方法透過改變透明度來實現動畫效果。具體語法如下:
$element.fadeln([speed],[easing],[fn]); $element.fadeOut([speed],[easing],[fn]);
// 改变元素的透明度 $('#box').fadeOut(3000); $('#box').fadeIn(3000);
動畫切換效果
#jQuery 除了提供了三種預定義動畫效果之外,還提供三組動畫切換效果:
toggle
([speed], [easing] [, fn] )方法: 如果元素是可見的,切換為隱藏的;如果元素是隱藏的,切換為可見的。 slideToggle
([speed], [easing] [, fn]) 方法: 透過高度變化來切換所有匹配元素的可見性,並在切換完成後可選地觸發一個回調函數。 fadeToggle
([speed], [easing] [, fn]) 方法: 透過不透明度的變化來開關所有匹配元素的淡入和淡出效果,並在動畫完成後可選地觸發一個回調函數。 $('#btn').click(function(){ // $('#box').toggle(3000); // $('#box').slideToggle(3000); $('#box').fadeToggle(3000) })
具有限制
animate()方法
jQuery 提供了anirmate()
方法完成自訂動畫效果,該方法具有兩種用法:
$element.animate(properties,duration,easing,complete)
/* animate()方法–自定义动画方法 1.animate(properties,duration,callback) * properties - 表示cSS的样式属性 * 设置动画执行结束的样式属性值 * duration - 表示动画执行的时长,单位为亳秒 * callback - 表示动画执行完毕后的回调函数 2.animate(properties,options) * properties - 表示cSS的样式属性 * 设置动画执行结束的样式属性值 * options - 表示设置动画的相关参数 * speed - 表示动画执行的时长,单位为毫秒 * comalete - 表示动画执行完毕后的回调函数 * queue - 布尔值,设置是否添加到动画队列中 */ /* $('#box').animate({ width : 100, height : 100 },3000); */ $('#box').animate({ width : 100, height : 100, left : 100 },{ speed : 3000 });
透過animate()
方法實作動畫效果,但不支援下列CSS 樣式屬性:
backgroundColor
borderBottonColor.
#borderLeftColor
borderRightColor
#borderTopColor
Color
#outlineColor
並發與排隊效果
並發效果: 指的就是多個動畫效果同時執行。
$("#panel").click(function(){ $(this).animate({ left: "500px", height:"200px" }, 3000); };
排隊效果 : 指的就是多個動畫依照先後順序執行。
$("#panel").click(function(){ $(this).animate({ left: "500px"},3000) .animate({ height: "200px" }, 3000); });
queue
: 用於控制目前的動畫效果是並發還是排隊效果:
/* queue - 用于控制当前的动画效果是并发还是排队效果 * 参数 * false - 并发 * true - 排队 */ $('#box').animate({ left : 300 },{ duration : 3000 }).animate({ top : 300 },{ duration : 3000, queue : true });
停止動畫效果
$element.animate([clearQueue][, gotoEnd]);###clearQueue : 如果設定成true,則清空隊列。可以立即結束動畫。 ######gotoEnd : 讓目前正在執行的動畫立即完成,並且重設show 和hide 的原始樣式,呼叫回呼函數等###
$('#stort').click(function(){ $('#box').animate({ left : 600 },3000).animate({ top : 200 },3000) }); $('#stop').click(function(){ /* * stop()方法没有接收任何参数时 - 立即停止执行动画 * stop(queue)方法的第一个参数 * false - 表示停止当前动画,但队列中的动画继续执行 * true - 表示停止当前动画,并且清空动画队列 * stop (queue,gotoEnd)方法的第二个参数 * false - 不会做任何处理 * true - 表示停止当前动画,并且将指定元素设置为动画执行完毕后的样式 */ $('#box').stop(true,true); });#########延遲執行動畫### #########jQuery 提供了###delay()### 方法用於設定一個延時來延遲執行佇列中之後的項目,具體語法如下:###
$element.delay(duration, queueName]);###duration :延時時間,單位為毫秒。 ######queueName : 佇列名詞,預設是Ex,動畫佇列。 ###
$('#box').animate({ left : 600 },3000).delay(1000).animate({ top : 200 },3000);###相關影片教學推薦:###jQuery影片教學######
以上是聊聊使用jQuery如何實現動畫(程式碼詳解)的詳細內容。更多資訊請關注PHP中文網其他相關文章!