与其他元素同时动画的slidetoggle

Question

I have a webpage with basically 2 sections: a header area and a content area. Header is fixed ie position:fixed and is always at the top. There are a few elements in the header section and I want to use slide functionality on that.

I've set appropriate padding-top for the content area. But I need to change it when the sliding of the header elements executes. Its working with a simple .CSS method.

Sample code: http://jsfiddle.net/kK7nJ/

I would like it to have simultaneous animation: ie when the menu is being displayed the content should be pushed down at the same time. Right now it is happening one after the other.

Please help.

Answer 1

The problem you are having stems from the fact that your .slideToggle call is making use of the version which sets duration and then a function call to animate when complete, specifically ( as documented ):

.slideToggle( [duration ] [, complete ] )

• duration (default: 400)
  Type: Number or String A string or number determining how long the animation will run.
• complete
  Type: Function()
  A function to call once the animation is complete.

While your anonymous function has the right idea, it (as you noticed) will only call after the animation finishes.

If you scroll down the documentation farther, you will find the following call format:

.slideToggle( options )

So, you pass an object to the .slideToggle method this way rather than just the two parameters as before, allowing you greater flexibility.

What you should take note of is this:

step
Type: Function( Number now, PlainObject fx )
A function to be called after each step of the animation.

So the basic way we would construct the options object to follow what you already linked would be to simply put duration and step in it, with step making the call to change the padding of the content element each animation frame (which is essentially how everything is animated by jquery to begin with, making this a nice and tidy solution):

{
  duration: 'slow', step: function(){
    $(".content").css({'padding-top':$(".header").outerHeight()});
  }
}

Here is the jsfiddle implementing this , which seems to work just fine in chrome at least, even with the content frame scrolled down/etc.

Answer 2

Rather than manipulating padding, why not put a hidden div at the top of the page and toggle it opposite the header? I suspect that the disparate transition types are the root of your problem.

Here's an example showing this:

<div class="header">
   <ul class="menu"><li>One</li><li>Two</li><li>Three</li><li>Four</li></ul>
   <a href="javascript:void(0)" id="pull">pull</a>
 </div>

<div class="menu-pad"></div>

$("#pull").on("click",function(){
  $(".menu, .menu-pad").slideToggle('slow');
});

http://jsfiddle.net/MV5kB/1/