CODEWITHSUNDEEP
javascriptjquerycssopacityslidedown
Jakub Zak
Jakub Zak

Reputation: 1232

Change opacity during slideDown function

I have and object with these css parameters:

 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;

And I have this javascript which I'm using to slide down and slide up this div:

 <script type="text/javascript">
 $(document).ready(function(){
 $('#main_div').click(function(){
 $('#slide_down').slideToggle(2000);
 });
 });
 </script>

Before I made this slide down with css3, hover and transition and I was changing opacity of the object in css, but now when I'm using javascript instead to slide it down. Is there any chance to change object opacity from 0.2 to 0.8 during sliding down? So it create very nice effect? Thank you.

Upvotes: 1

Views: 2906

Answers (2)

mVChr
mVChr

Reputation: 50195

Your best bet is to create a custom animation function using animate instead of 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

Upvotes: 5

Alejandro Urbano Alvarez
Alejandro Urbano Alvarez

Reputation: 3346

You could use .animate() at the same time to achieve that effect:

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

I'm testing it here, but it seems to perform first one and then the other: http://jsfiddle.net/yHCvL/

Upvotes: 1

Related Questions