代码之家  ›  专栏  ›  技术社区  ›  eozzy

slideDown不会“隐藏”元素

  •  1
  • eozzy  · 技术社区  · 12 年前

    我想显示/隐藏订单表单的动画效果很好,除了一个问题,表单在向下滑动时不会隐藏,它的一部分仍然可见。

    HTML格式:

    <div class="post">
        <div class="post-content">
            <a href="" class="order"></a>
            ...
        </div>
        <div class="order-form">
            <a href="" class="close"></a>
            ...
        </div>
    </div>
    

    jQuery(查询):

    $(".post .order").click(function () {
              $(this).fadeOut();
              $(this).parents('.post-content').slideUp();
              $(this).parents('.post-content').next('.order-form').show();
              $(this).parents().find('.close').fadeIn();
              return false;
        });
        $(".order-form .close").click(function () {
            $(this).fadeOut();
            $(this).parents('.order-form').slideDown();
            $(this).parents('.order-form').prev('.post-content').slideDown(function(){
                $(this).parents('.order-form').prev('.post-content').css('display', 'none');
            });
            $(this).parents().find('.order').fadeIn();
            return false;
        });
    

    ..正如你所看到的,我试过了 .hide() 但这并没有像预期的那样起作用,它禁用了滑动向下的动画,这是一个整洁的抽屉(正确的单词?)式效果所必需的。

    谢谢

    2 回复  |  直到 12 年前
        1
  •  1
  •   Guilherme    12 年前

    我试试这个 http://jsfiddle.net/2yrj6/2/
    但我不知道这是不是你想要的

        2
  •  0
  •   Lian    12 年前

    我看到你在打电话 $(this).parents('.order-form').prev('.post-content').css('display', 'none'); 在回调函数内部。除了 $(this) 不再是关闭按钮。这是刚刚隐藏起来的元素。尝试声明var $this 在点击回调的第一行中。然后使用 $这个 而不是 $(这个)

    其他注意事项: 你应该这样做 parents('.post') 而不是 parents() 以获得更好的性能。 您可以使用 .hide() 而不是 .css('display', 'none')