jquery - 刺耳的切换效果

Question

我有一个固定高度的 div，如下所示。 2 个问题。

1 - 当我点击 'on_click'show_hidden_​​div' 时它确实显示了 div 但由于父 div 的高度是固定的，我只得到一个滚动条，现在用户必须向下滚动，任何方式自动向下滚动时隐藏的 div 是显示？

2 - 当隐藏的 div 再次隐藏时(通过单击链接)，似乎整个“fixed_height”有点不和谐，而 div 被隐藏了。如何使它平滑？

我显然在使用 jquery，这个固定高度的 div 在 jquery 工具覆盖 div 中，基本上这是一个模态对话框。

这是javascript

$('#on_click_show_hidden_div').live('click', function() {
        $('#on_click_show_hidden_div').toggle('slow');
        return false;
    });

  <div id='fixed_height>

    <div id='form-wrapper'>
    <!-- form and form element -->
    <form id='post_form'>
    <a id='on_click_show_hidden_div'></a>
    <div id='hidden_div_with_more_form_elements'></div>
    <input id='submit'/>
    </form>
    </div>

</div>

Answer 1

首先，我假设在您的点击事件中，您打算切换您的 hidden_​​div_with_more_form_elements，而不是链接本身。

其次，如果你合理地格式化你的 html(即双引号)，那将会很有帮助

第三，如果您提供一些基本的 CSS 来显示示例 html 的实际问题，这将很有帮助。

最后，这里接近你想要的:

$('#on_click_show_hidden_div').click(function() {
  $('#hidden_div_with_more_form_elements').toggle('slow', function(){
     var pos = $('#hidden_div_with_more_form_elements').position().top;
     $('#fixed_height').scrollTop(pos);
  });

  return false;
});

这是一个活生生的例子:http://jsfiddle.net/ryleyb/ewehW/

本质上，jQuery 的 scrollTop提供你想做的事情，我在切换动画的回调中使用它(即一旦成功动画就滚动到它)。