Изменить непрозрачность во время функции slideDown

У меня есть и объект с этими параметрами 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
person Jakub Zak    schedule 18.03.2012    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Лучше всего создать пользовательскую функцию анимации, используя 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');
        });
    }
});​

Посмотреть демо

person mVChr    schedule 18.03.2012
comment
Это выглядит точно так же, как то, что я искал. Но по странной причине я не могу заставить его работать. :( - person Jakub Zak; 19.03.2012
comment
Хорошо, большое спасибо, я просто неправильно скопировал переменную. Спасибо большое. - person Jakub Zak; 19.03.2012

arrow_upward
1
arrow_downward

Вы можете использовать .animate() одновременно для достижения этого эффекта:

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

Я тестирую это здесь, но, похоже, сначала выполняется одно, а затем другое: http://jsfiddle.net/yHCvL/

person aurbano    schedule 18.03.2012
comment
Это изменило непрозрачность. Но то, чего я пытался добиться. Пока он не скользит вниз, измените непрозрачность с 0,2 до 0,8, а когда он снова скользит вверх, наоборот, с 0,8 до 0,2. - person Jakub Zak; 19.03.2012
comment
Я думал, что jQuery будет выполнять оба действия одновременно, но он сначала выполняет одно, а затем другое. Так что, вероятно, было бы лучше сделать, как предлагает @mVChr в своем ответе, создав новую анимацию. - person aurbano; 19.03.2012