目錄
- jQuery影片
- 顯示與隱藏
- 收縮與展開
- 淡入淡出
- 停止影片
jQuery影片
利用jQuery也是可以實作一些簡單的影片效果的哦，下面來看看jQuery可以實作哪些效果吧，
顯示與隱藏
方法：
例如：
<button id="a">顯示</button>
<button id="b">隱藏</button>
<button id="c">交替</button>
$(function(){
$('#a').click(function(){
$('img').show('slow')
})
$('#b').click(function(){
$('img').hide(5000)
})
$('#c').click(function(){
$('img').toggle()
})
})
效果：
收縮與展開
方法：
例如：
<button id="a">收縮</button>
<button id="b">展開</button>
$('#a').click(function(){
$('img').slideUp('slow')
})
$('#b').click(function(){
$('img').slideDown('slow')
})
效果：
淡入淡出
方法：
例如：
<button id="a">淡入</button>
<button id="b">淡出</button>
<button id="c">交替</button>
$('#a').click(function(){
$('img').fadeIn('slow')
})
$('#b').click(function(){
$('img').fadeOut(5000)
})
$('#c').click(function(){
$('img').fadeToggle(2000)
效果：
停止影片
如果不想再繼續使用影片，那么可以選擇停止影片，
方法：stop()方法
例如：
$("div").stop();// 停止當前影片，繼續下一個影片
$("div").stop(true); // 清除div元素影片佇列中的所有影片
$("div").stop(true, true);// 停止當前影片，清除影片佇列中的所有影片
$("div").stop(false, true);// 停止當前影片，繼續執行下一個影片
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/291053.html
標籤：其他
上一篇：WEB前端入門淺談03