我反对这些 css 参数:
position:fixed;
top:0px;
left:25%;
width:50%;
height: 300px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
display:none;
background: -moz-linear-gradient(
top,
#807980 0%,
#3d323d);
background: -webkit-gradient(
linear, left top, left bottom,
from(#807980),
to(#3d323d));
-webkit-box-shadow: 0px 0px 10px rgba(46, 50, 50, 1);
-moz-box-shadow: 0px 0px 10px rgba(46, 50, 50, 1);
-o-box-shadow: 0px 0px 10px rgba(46, 50, 50, 1);
box-shadow: 0px 0px 10px rgba(46, 50, 50, 1);
opacity: 0.2;
我有这个 javascript,我用它来向下滑动和向上滑动这个 div:
<script type="text/javascript">
$(document).ready(function(){
$('#main_div').click(function(){
$('#slide_down').slideToggle(2000);
});
});
</script>
在我使用 css3、悬停和过渡制作此幻灯片之前,我在 css 中更改对象的不透明度,但现在当我使用 javascript 而不是将其向下滑动时。在向下滑动过程中是否有机会将对象不透明度从 0.2 更改为 0.8?所以它创造了很好的效果?谢谢。
最佳答案
最好的办法是使用 animate
而不是 slideToggle
创建自定义动画函数:
var sdh = $('#slide_down').css('height');
$('#main_div').click(function() {
var $sd = $('#slide_down');
if ($sd.css('display') == 'none') {
$sd.css('height', 0);
$sd.css('display', 'block');
$sd.animate({
height: sdh,
opacity: 0.8
}, 2000);
} else {
$sd.animate({
height: 0,
opacity: 0.2
}, 1000, function(){
$(this).css('display', 'none');
});
}
});
See demo
关于javascript - 在 slideDown 函数期间更改不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9761656/