jQuery opacity: 'toggle'作用
opacity屬性用法參閱CSS opacity屬性一章節。
可以看出opacity屬性值中並沒有toggle一項,但是jQuery中卻有此值。
從字面意思很好理解,切換透明度0-1或者1-0,與toggleClass一個道理。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <head> <title>螞蟻部落</title> <style type="text/css"> #antzone{ width:200px; height:100px; background:#ccc; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(function(){ $("#bt").click(function(){ $("#antzone").animate({ opacity:'toggle' },1000); }) }) </script> </head> <body> <div id="antzone"></div> <input type="button" id="bt" value="檢視效果"/> </body> </html>
程式碼演示了opacity: 'toggle'的作用,程式碼非常的簡單這裡就不多介紹。
特別說明:此寫法只能夠用在動畫效果中,其他的場景無效。
相關文章
- jQuery toggle()jQuery
- animate()動畫的opacity: 'show'和opacity: 'hide'作用動畫IDE
- 2018-12-14jQuery 效果 - toggle() 方法jQuery
- jQuery $ 的作用jQuery
- JavaScript toggle()JavaScript
- jquery toggle 的切換顯示 可用 a超連結的切換jQuery
- border opacity
- JavaScript toggle() 方法JavaScript
- opacity騷操作
- CSS opacity 透明度CSS
- opacity這個小東西
- fill-opacity 屬性
- jQuery.fn的作用是什麼jQuery
- 鴻蒙HarmonyOS實戰-ArkUI元件(Toggle)鴻蒙UI元件
- opacity應用程式碼例項
- UGUI原始碼解析(Toggle和ToggleGroup)UGUI原始碼
- JQuery中$(document)是什麼意思有什麼作用jQuery
- jquery的$.extend和$.fn.extend作用及區別jQuery
- hidden, opaque, alpha, opacity的區別Opaque
- opacity屬性用法簡單介紹
- fill-opacity屬性用法詳解
- opacity和rgba透明度深入解析
- jQuery選擇器中的大於號>作用是什麼jQuery
- jQuery()方法第二個引數的作用簡單介紹jQuery
- 投稿004期 | CSS中用 opacity、visibility、dCSS
- CSS3中RGBA和opacity的區別CSSS3
- 【Flutter 元件集錄】Opacity| 8月更文挑戰Flutter元件
- opacity設定元素透明度程式碼例項
- 【 開源計劃 - 元件包 】 旋轉切換 toggle_rotate元件
- 查漏補缺,盤點和toggle相關的幾個APIAPI
- rgba與opacity的區別以及在遮罩層的運用遮罩
- jquery Mobiscroll日期時間選擇外掛使用 以及設定defaultValue屬性不起作用jQuery
- JavaScript 作用域 與 作用域鏈JavaScript
- js 作用域和作用域鏈JS
- js的作用域、作用域鏈JS
- jQuery初探:自制jQueryjQuery
- js的作用域和作用域鏈JS
- javascript之作用域與作用域鏈JavaScript