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

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

1 голос
/ 18 марта 2012

У меня есть и объект с этими параметрами 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 при скольжении вниз?Так это создает очень хороший эффект?Спасибо.

Ответы [ 2 ]

5 голосов
/ 19 марта 2012

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

См. Демонстрацию

1 голос
/ 18 марта 2012

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

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

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

...