如何使用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. 元素的不透明度
- 2. Javascript/jquery多元素不透明动画
- 3. jQuery不透明度动画
- 4. 透明画布,用不透明的元素
- 5. 如何动画SKShapeNode的不透明度?
- 6. 如何动画DropShadowEffect的不透明度?
- 7. QML - 堆叠元素的不透明度
- 8. WPF中透明的不透明元素
- 9. 重叠部分透明元素的不透明度
- 10. flash as3补间不透明度不影响子元素的不透明度
- 11. ListBoxItem动画和不透明度
- 12. 减慢CSS不透明度动画
- 13. CSS背景不透明度动画
- 14. CALayer/CABasicAnimation不透明度动画缓存?
- 15. 动画不透明度隐藏/显示
- 16. 设置CSS中不透明度的div内元素的不透明度?
- 17. 如何增加HTML中不透明度的子元素的不透明度?
- 18. 不透明度采用子元素
- 19. JQuery元素不透明度设置
- 20. 风格元素的不透明度,而不造型子元素
- 21. jQuery不动画不透明但会旋转元素悬停
- 22. 重置某个元素的子元素的不透明度
- 23. 悬停动画fadein不透明度0.5悬停不透明度1
- 24. 在IE7中设置动态生成元素的不透明度
- 25. 独立元素的背景不透明度从它的内容不透明
- 26. 使用PNG透明度的IE7动画
- 27. SVG - 动画不透明
- 28. 点击透明画布元素选择背后的元素
- 29. Xcode Swift动画透明度错误
- 30. CSS透明度,如何在透明容器元素
我认为你需要澄清你的问题。你在谈论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