如何使用CSS或jQuery來動畫元素的「不透明度」?元素的動畫不透明度
回答
號您需要使用.fadeIn('slow or fast')
或.fadeOut('slow or fast')
這些並不是用於在jQuery動畫中指定速度的唯一兩個選項。 – Shaz 2015-04-14 21:20:35
CSS3過渡可以做到這一點。我做了一個鼠標激活工具欄下面:
CSS
<style type="text/css">
#cmsToolBar {
font-family: helvetica,arial,sans-serif;
font-size: 1.1em;
padding: 5px;
line-height: 1.5;
min-height: 1em;
width: 100%;
position: fixed;
top: 0;
left: 0;
color: black;
background-color: #DDDDBB;
opacity: 0.15;
border-bottom: dotted 1px black;
transition-duration: .2s;
-moz-transition-duration: .2s;
-webkit-transition-duration: .2s;
-o-transition-duration: .2s;
}
#cmsToolBar:hover {
min-height: 5em;
opacity: .98;
}
</style>
HTML
<div id="cmsToolBar">
<p>This is where the CMS tool bar will go</p>
</div>
記住IE10pp2的-ms-transition ...另外我會添加沒有供應商前綴的轉換,以便將來兼容。 – 2011-04-18 21:13:48
不知道IE版本。但是上面的例子已經定義了一個通用的轉換。 – GordonM 2011-04-18 21:18:56
當然,使用CSS轉換:
div {
opacity: 1;
-moz-transition: all 0.3s ease-out; /* FF4+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5+ */
-webkit-transition: all 0.3s ease-out; /* Safari 3.2+, Chrome */
-ms-transition: all 0.3s ease-out; /* IE10+ */
transition: all 0.3s ease-out; /* standard format */
}
div:hover {
opacity: 0.3;
}
<div>Hover over me with your mouse!</div>
<div>Hover over me with your mouse!</div>
<div>Hover over me with your mouse!</div>
<div>Hover over me with your mouse!</div>
<div>Hover over me with your mouse!</div>
<div>Hover over me with your mouse!</div>
- 1. GMSMarker不透明度不透明動畫
- 2. 元素的不透明度
- 3. Javascript/jquery多元素不透明動畫
- 4. CSS不透明度動畫
- 5. jQuery不透明度動畫
- 6. CALayer不透明度動畫
- 7. 如何使用jQuery動畫元素的背景不透明度?
- 8. 透明畫布,用不透明的元素
- 9. 如何動畫DropShadowEffect的不透明度?
- 10. 帶有不透明度的jQuery動畫
- 11. 如何動畫SKShapeNode的不透明度?
- 12. QML - 堆疊元素的不透明度
- 13. 表格元素的JavaScript不透明度
- 14. WPF中透明的不透明元素
- 15. 父元素透明的HTML元素不會變得不透明
- 16. 不透明元素上的不透明元素
- 17. 重疊部分透明元素的不透明度
- 18. flash as3補間不透明度不影響子元素的不透明度
- 19. 設置CSS中不透明度的div內元素的不透明度?
- 20. 如何增加HTML中不透明度的子元素的不透明度?
- 21. 不透明度動畫到特定值
- 22. 不透明度蒙版動畫
- 23. 動畫不透明度隱藏/顯示
- 24. CALayer/CABasicAnimation不透明度動畫緩存?
- 25. CSS背景不透明度動畫
- 26. 減慢CSS不透明度動畫
- 27. CSS不透明度動畫safari bug?
- 28. ListBoxItem動畫和不透明度
- 29. 不透明度採用子元素
- 30. JQuery元素不透明度設置
我認爲你需要澄清你的問題。你在談論jQuery'.fadeOut()'/'.fadeIn()'? – Tejs 2011-04-18 21:05:43
可能與CSS3 – ajcw 2011-04-18 21:07:13
真棒downvote,做得好!如果OP甚至沒有足夠的意義來成爲英語爲母語的人,那麼,他*應該*由於靜戈而被降級!我特別喜歡你,沒有評論就低估了你;就是那種精神! – 2011-04-18 21:14:42