在 slideDown 功能期间更改不透明度答案

【问题标题】：Change opacity during slideDown function在 slideDown 功能期间更改不透明度
【发布时间】：2012-03-19 04:02:02
【问题描述】：

我有这些 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？所以它创造了非常好的效果？谢谢。

【问题讨论】：

标签： javascript jquery css opacity slidedown

【解决方案1】：

最好的办法是使用 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

【讨论】：

这看起来和我想要的完全一样。但由于奇怪的原因，我无法让它工作。 :(
好的，非常感谢，我只是以错误的方式复制了变量。非常感谢。

【解决方案2】：

您可以同时使用 .animate() 来实现该效果：

$('#slide_down').slideToggle(2000);
$('#slide_down').animate({ opacity: 0.8 }, 2000);

我在这里测试它，但它似乎执行第一个然后另一个：http://jsfiddle.net/yHCvL/

【讨论】：

它确实改变了不透明度。但是我想要达到的目标。直到它向下滑动将不透明度从 0.2 更改为 0.8，当它向上滑动时，从 0.8 更改为 0.2。
我认为 jQuery 会同时执行这两个任务，但它先执行一个然后执行另一个。因此，按照@mVChr 在他的回答中建议的那样，创建一个新动画可能会更好。