jQuery 04 效果 淡入淡出
主要使用四種fade方法實現
fadeIn(speed,backfunction)方法
使元素消失
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
fadeOut(speed, backfunction)方法
使元素出現
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
fadeToggle(speed, backfunction)方法
如果出現則消失,如果消失則出現
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
fadeTo(speed,opacity, backfunction)方法
若隱若現,降低透明度
沒有預設引數,必須傳參
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
相關文章
- jQuery 效果 – 淡入淡出jQuery
- jquery中淡入淡出效果案例jQuery
- jQuery 實現淡入淡出效果jQuery
- jQuery 淡入淡出效果下拉導航選單jQuery
- 實現元素的淡入淡出效果
- 淡入淡出效果簡單程式碼例項
- jQuery 效果方法jQuery
- win10淡入淡出效果怎麼關 win10怎麼取消視窗淡入淡出Win10
- jQuery基礎 效果jQuery
- jQuery 放大鏡效果jQuery
- jQuery 效果 – 動畫jQuery動畫
- jQuery 效果 – 滑動jQuery
- javascript原生封裝一個淡入淡出效果的函式JavaScript封裝函式
- jQuery 效果 – 停止動畫jQuery動畫
- jQuery簡單tab效果jQuery
- 04_jQuery的2把利器jQuery
- jQuery彈幕效果詳解jQuery
- jQuery打字機效果程式碼jQuery
- jQuery實現輪播效果jQuery
- jQuery 放大鏡效果詳解jQuery
- jQuery文字從頂部掉落效果jQuery
- jquery焦點圖效果視訊jQuery
- jQuery 效果 – 隱藏和顯示jQuery
- CSS 淡入淡出CSS
- 前端特效【第04期】|果汁混合效果-下前端特效
- jQuery表單驗證效果詳解jQuery
- jQuery滑鼠懸浮翻牌效果詳解jQuery
- jQuery滑鼠懸浮聚焦效果詳解jQuery
- jQuery實進度條效果詳解jQuery
- 2018-12-14jQuery 效果 - toggle() 方法jQuery
- jQuery星級評分效果詳解jQuery
- jQuery表格隔行變色效果詳解jQuery
- jQuery 倒數計時效果詳解jQuery
- jQuery圖片無縫滾動效果jQuery
- 前端基礎-jQuery的動畫效果前端jQuery動畫
- 基於jquery實現穿梭框效果jQuery
- jQuery 圖片垂直切換效果詳解jQuery
- jQuery 動畫效果 與 動畫佇列jQuery動畫佇列