2

我有一个基本上有 2 个部分的网页：标题区域和内容区域。标题是固定 position:fixed的，即始终位于顶部。标题部分中有一些元素，我想在上面使用幻灯片功能。

我已经padding-top为内容区域设置了合适的。但是当标题元素的滑动执行时我需要更改它。它使用一种简单的.CSS方法。

示例代码：http: //jsfiddle.net/kk7nJ/

我希望它有同步动画：即显示菜单时，应同时按下内容。现在它正在一个接一个地发生。

请帮忙。

4

2 回答 2

4

您遇到的问题源于您的 .slideToggle 调用正在使用设置持续时间的版本，然后在完成时调用函数调用动画，特别是（如文档所述）：

.slideToggle（[持续时间] [，完成]）

  • 持续时间（默认值：400）
    类型：数字或字符串 确定动画将运行多长时间的字符串或数字。
  • complete
    类型：Function()
    动画完成后调用的函数。

虽然您的匿名函数有正确的想法，但它（如您所见）只会在动画完成后调用。

如果进一步向下滚动文档，您会发现以下调用格式：

.slideToggle( 选项 )

因此，您以这种方式将对象传递给 .slideToggle 方法，而不是像以前那样只传递两个参数，从而为您提供更大的灵活性。

你应该注意的是：

  • step
    类型：Function(Number now, PlainObject fx)
    动画每一步后调用的函数。

    • 因此，我们构建选项对象以遵循您已经链接的内容的基本方法是简单地放入持续时间并加入其中，步骤调用以更改每个动画帧的内容元素的填充（这基本上就是一切由 jquery 动画开始，使其成为一个漂亮而整洁的解决方案）：

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

    这是实现 this 的 jsfiddle，至少在 chrome 中似乎工作得很好，即使内容框架向下滚动/等。

    于 2013-01-08T02:38:45.417 回答
    0

    与其操纵填充，不如在页面顶部放置一个隐藏的 div 并将其切换到标题的对面？我怀疑不同的转换类型是您问题的根源。

    这是一个显示此的示例：

    <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/

    于 2013-01-08T00:46:11.173 回答