1

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

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()，但没有按预期工作，它禁用了整洁的抽屉（正确的词？）所需的滑动动画效果。

谢谢！

4

2 回答 2

1

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

于 2012-09-09T20:22:36.140 回答
0

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

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

于 2012-09-09T20:23:11.490 回答