jquery slideToggle acting more like blind. help?

Question

I'm trying to get my sliding div working properly with slideToggle. First off, here is the working url:

http://cu3ed.com/fadeslider/

The problem I am having with it is I am getting more of a blind effect rather than a slide down effect. I've tried changing the CSS and using negative top margin etc. to no avail. What I am trying to accomplish is basically the same as the Products menu at telerik-dot-com and the All Products menu from within the site. The one at aspnet-ajax/controls/examples/default/ is more related to what I am trying to do via the click function. I realize these may be different, but what I am basically looking for functionality-wise is the div to do more of a slide in instead of a blind down.

Thanks for any help.

Also, to make an addition to this, I would like to fade in the actual contents of the panel once the panel slides in then fade out when clicking the tab to close the panel before sliding up. I've tried adding fadeIn function to the h2 and p but no luck. If anyone wants to chime in on this as well feel free. Thank you!

Answer 1

That's because the jQuery slide effect modifies the height of the container you are sliding, and not its position. If you want to achieve a real sliding effect, you will have to modify the top CSS attribute, given that your div is fixed or absolute-positioned.

I coded something similar a long time ago, you can see it working there.

The way it is coded though, is terrible : I was using eval() to re-evaluate the right CSS property (top, bottom, left or right). You can get the jquery.docker.js file from there to get inspiration, but mainly the trick for your case is to animate on the top CSS property.

Answer 2

Hi,

Your css should look like below, top attribute can either be calculated on page load or you give a fixed value.

#slidebox {
    margin:0;
    padding:0;
    position:absolute;
    right:40px;
    top:-141px; /*this is the trick*/
    width:auto;
    z-index:100;
}

then on your js what you need to do is as subtenante says playing with 'top' attribute.

var $a = $('a.btn-slide'),
    $slider = $('#slidebox');

$a.click(function(){
   if($a.hasClass('active')){
     $slider.animate({'top':0},400,function(){
        $a.removeClass('active');
     });
   }else{ 
     $slider.animate({'top':'-141px'},400,function(){
        $a.addClass('active');
     });
   }
})

hope this helps, Sinan.