Forums

Hompimpa

How can I combine sliding effect with fading effect on the jquery accordion? I created a system that is not good here, with animatng height and opacity. But the declaration of padding on the .widget-content makes the animation not run smoothly. And I think animating height and opacity are not right procedure for jquery panels. Can I combine fading and sliding effect simultaneously together in jquery?

<script type="text/javascript">
$(document).ready(function() {
$('#sidebar-wrapper .widget-content').hide();
$('#sidebar-wrapper h2:first').addClass('active').next().animate({opacity:"show",height:"toggle"},600);
$('#sidebar-wrapper h2').click(function(){
if($(this).next().is(':hidden')) {
$('#sidebar-wrapper h2').removeClass('active').next().animate({opacity:"hide",height:"toggle"},600);
$(this).toggleClass('active').next().animate({opacity:"show",height:"toggle"},600);
}
return false;
});
});
</script>

<div id="sidebar-wrapper">
<h2>Trigger</h2>
<div class="widget-content">
...
</div>
<h2>Trigger</h2>
<div class="widget-content">
...
</div>
<h2>Trigger</h2>
<div class="widget-content">
...
</div>
</div>

Hompimpa

Anybody have the answer for my problem?

Hompimpa

PLEEAASEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Hompimpa

OH DEAAARRRRR.... much easier than what I thought:

$(function() {
    $('#sidebar-wrapper .widget-content').hide();
    $('#sidebar-wrapper h2:first').addClass('active').next().animate({opacity:1}, {duration:600, queue:false}).slideDown();
    $('#sidebar-wrapper h2').click(function() {
        if($(this).next().is(':hidden')) {
            $('#sidebar-wrapper h2').removeClass('active').next().animate({opacity:0}, {duration:600, queue:false}).slideUp();
            $(this).toggleClass('active').next().animate({opacity:1}, {duration:600, queue:false}).slideDown();
        }
        return false;
    });
});

Sunrise

Hi Hompimpa,

Thanks a lot for this. Surprisingly, the solution you found (very simple and easy) is not suggested that much on the web.

So, thanks again!

Cheers

treehouse : what would you like to learn today?

Forums

[Solved] Add Fading Effect to SlideDown/SlideUp (JQuery)